.btn { padding: 0.5rem 0.75rem; border-radius: 0.75rem; }
.btn-ghost { background-color: rgb(229, 229, 229); }
.btn-ghost:hover { background-color: rgb(212, 212, 212); }
.btn-primary { background-color: rgb(5, 150, 105); color: white; }
.btn-primary:hover { background-color: rgb(4, 120, 87); }
.btn-info { background-color: rgb(2, 132, 199); color: white; }
.btn-info:hover { background-color: rgb(3, 105, 161); }
.btn-warn { background-color: rgb(217, 119, 6); color: white; }
.btn-warn:hover { background-color: rgb(180, 83, 9); }
.btn-danger { background-color: rgb(225, 29, 72); color: white; }
.btn-danger:hover { background-color: rgb(190, 18, 60); }
.card { border-radius: 1.5rem; background: white; border: 1px solid rgb(229, 229, 229); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
dialog::backdrop { background: rgba(0,0,0,.4); }
.barra-superior {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 0.5rem;
padding: 0.5rem 1rem;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.barra-superior::-webkit-scrollbar { display: none; }
.elemento-barra {
flex: 0 0 auto;
min-width: 80px;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
padding: 0.4rem 0.6rem;
transition: all 0.2s ease;
}
.ayuda-json { display: none !important; }
.modo-cuidador .ayuda-json { display: flex !important; }
@media (max-width: 1024px) {
.barra-superior { flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.elemento-barra { min-width: 70px; max-width: 85px; padding: 0.3rem 0.5rem; font-size: 0.9rem; }
}
@media (max-width: 768px) {
.barra-superior { gap: 0.3rem; padding: 0.3rem 0.5rem; }
.elemento-barra { min-width: 65px; max-width: 75px; padding: 0.25rem 0.4rem; font-size: 0.85rem; }
}
@media (max-width: 480px) {
.barra-superior { gap: 0.2rem; }
.elemento-barra { min-width: 60px; max-width: 65px; padding: 0.2rem 0.3rem; font-size: 0.8rem; }
}

/* ===== BARRA RAPIDA - CON EFECTO DE ONDA SECUENCIAL (8 SEGUNDOS) ===== */
.quick-bar-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.05px;
    padding: 0.5rem 0.25rem;
    width: 100%;
    overflow-x: auto;
    margin-top: 3px;
}

.quick-bar-centered .quick-button {
    flex: 0 0 auto;
    width: 95px;
    height: 105px;
    min-width: 95px;
    max-width: 95px;
    min-height: 105px;
    max-height: 105px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 3px 3px 3px;
    border-radius: 10px;
    transition: all 0.2s ease;
    border: none;
    box-sizing: border-box;
    background: transparent;
    
    /* ANIMACIÓN DE ONDA SECUENCIAL - 8 SEGUNDOS TOTALES */
    animation: pulse-wave 8s ease-in-out infinite;
    animation-fill-mode: both;
}

/* ===== RETRASOS PARA CADA ICONO (1 SEGUNDO POR ICONO) ===== */
.quick-bar-centered .quick-button:nth-child(1) { animation-delay: 0s; }
.quick-bar-centered .quick-button:nth-child(2) { animation-delay: 1s; }
.quick-bar-centered .quick-button:nth-child(3) { animation-delay: 2s; }
.quick-bar-centered .quick-button:nth-child(4) { animation-delay: 3s; }
.quick-bar-centered .quick-button:nth-child(5) { animation-delay: 4s; }
.quick-bar-centered .quick-button:nth-child(6) { animation-delay: 5s; }
.quick-bar-centered .quick-button:nth-child(7) { animation-delay: 6s; }
.quick-bar-centered .quick-button:nth-child(8) { animation-delay: 7s; }

/* ===== ANIMACIÓN DE ONDA (1 SEGUNDO DE DURACIÓN) ===== */
@keyframes pulse-wave {
    0% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
    25% {
        transform: scale(1.08);
        filter: brightness(1.3);
        box-shadow: 0 0 15px 5px var(--wave-color, transparent);
    }
    50% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }
}

/* ===== 8 COLORES DIFERENTES PARA CADA ICONO ===== */
.quick-bar-centered .quick-button:nth-child(1) { background: transparent; --wave-color: #4DA6FF; }
.quick-bar-centered .quick-button:nth-child(2) { background: transparent; --wave-color: #FFD700; }
.quick-bar-centered .quick-button:nth-child(3) { background: transparent; --wave-color: #98FB98; }
.quick-bar-centered .quick-button:nth-child(4) { background: transparent; --wave-color: #87CEEB; }
.quick-bar-centered .quick-button:nth-child(5) { background: transparent; --wave-color: #DDA0DD; }
.quick-bar-centered .quick-button:nth-child(6) { background: transparent; --wave-color: #FBCEB1; }
.quick-bar-centered .quick-button:nth-child(7) { background: transparent; --wave-color: #B0E0E6; }
.quick-bar-centered .quick-button:nth-child(8) { background: transparent; border: none; --wave-color: #FBCEB1; }

.quick-bar-centered .quickbar-img,
.quick-button img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: transparent;
    display: block;
    margin: 0 auto 2px auto;
}

/* ===== TEXTO PARA TODOS LOS ICONOS ===== */
.quick-button div {
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    font-weight: 600;
    color: #333;
    width: 100%;
    padding: 2px 0;
    margin-top: 0;
    white-space: normal;
    word-break: break-word;
    display: block;
    max-width: 90px;
    height: auto;
    min-height: 22px;
    overflow: visible;
    text-overflow: clip;
}

/* ===== HOVER SIN BLOQUEAR LA ANIMACIÓN ===== */
.quick-bar-centered .quick-button:hover {
    filter: brightness(1.1);
    transition: all 0.2s ease;
}

/* ===== TABLETS (1024px o menos) ===== */
@media (max-width: 1024px) {
    .quick-bar-centered {
        flex-wrap: wrap;
        gap: 0.1px;
    }
    
    .quick-bar-centered .quick-button {
        width: 88px;
        height: 98px;
        min-width: 88px;
        max-width: 88px;
        min-height: 98px;
        max-height: 98px;
    }
    
    .quick-bar-centered .quickbar-img,
    .quick-button img {
        width: 58px;
        height: 58px;
        border: none;
        border-radius: 0;
        background: transparent;
    }
    
    .quick-button div {
        font-size: 8.5px;
        min-height: 20px;
    }
}

/* ===== MÓVILES (768px o menos) ===== */
@media (max-width: 768px) {
    .quick-bar-centered {
        gap: 0.15px;
    }
    
    .quick-bar-centered .quick-button {
        width: 82px;
        height: 92px;
        min-width: 82px;
        max-width: 82px;
        min-height: 92px;
        max-height: 92px;
    }
    
    .quick-bar-centered .quickbar-img,
    .quick-button img {
        width: 56px;
        height: 56px;
    }
    
    .quick-button div {
        font-size: 8px;
        min-height: 20px;
    }
}

/* ===== MÓVILES PEQUEÑOS (480px o menos) ===== */
@media (max-width: 480px) {
    .quick-bar-centered .quick-button {
        width: 74px;
        height: 86px;
        min-width: 74px;
        max-width: 74px;
        min-height: 86px;
        max-height: 86px;
    }
    
    .quick-bar-centered .quickbar-img,
    .quick-button img {
        width: 50px;
        height: 50px;
        border: 0.15px solid rgba(0,0,0,0.1);
    }
    
    .quick-button div {
        font-size: 7.5px;
        min-height: 18px;
        padding: 1px 0;
    }
}

/* ===== MÓVILES MUY PEQUEÑOS (360px o menos) ===== */
@media (max-width: 360px) {
    .quick-bar-centered .quick-button {
        width: 68px;
        height: 82px;
        min-width: 68px;
        max-width: 68px;
        min-height: 82px;
        max-height: 82px;
    }
    
    .quick-bar-centered .quickbar-img,
    .quick-button img {
        width: 54px;
        height: 54px;
    }
    
    .quick-button div {
        font-size: 7px;
        min-height: 18px;
    }
}
/* ===== FIN BARRA RAPIDA ===== */

/* ===== CUADRÍCULAS DE ICONOS - VERSIÓN PEGADA (espacio mínimo) ===== */
.grid-cat-responsive { 
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.grid-items-responsive {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto));
    justify-content: center;
    gap: 4px;
    width: 100%;
}

/* TABLETS Y PC */
@media (min-width: 641px) {
    .grid-cat-responsive {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 6px;
    }
    .grid-items-responsive {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        gap: 6px;
    }
}

/* PANTALLA GRANDE (PC) */
@media (min-width: 1024px) {
    .grid-cat-responsive {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .grid-items-responsive {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
}

/* HORIZONTAL (landscape) en móvil - más columnas */
@media (orientation: landscape) and (max-width: 900px) {
    .grid-cat-responsive,
    .grid-items-responsive {
        grid-template-columns: repeat(6, minmax(0, auto));
        gap: 3px;
    }
}

/* MÓVILES MUY PEQUEÑOS */
@media (max-width: 360px) {
    .grid-cat-responsive,
    .grid-items-responsive {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 3px;
    }
}

/* TEXTO PEGADO AL ICONO - separación mínima */
.category-item > div:not(.category-text),
.item-button > div:not(.item-text) {
    margin-top: 2px !important;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* AJUSTE PARA QUE LAS IMÁGENES NO SE ENCOGEN */
.category-item img,
.item-button img {
    width: auto !important;
    height: auto !important;
    max-width: 94% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ===== FIN CUADRÍCULAS ===== */

.blinking {
animation: blink 1.5s infinite;
background-color: #3b82f6 !important;
color: white !important;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
.child-selector { position: relative; display: inline-block; }
.child-dropdown {
display: none;
position: fixed;
background-color: white;
min-width: 280px;
max-width: 90vw;
max-height: 70vh;
overflow-y: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 9999;
border-radius: 12px;
padding: 15px;
top: 60px;
right: 20px;
margin-top: 6px;
}
.child-dropdown.show { display: block; }
.child-item {
padding: 12px;
cursor: pointer;
border-radius: 8px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s;
border: 1px solid #e5e7eb;
}
.child-item:hover { background-color: #f0f0f0; transform: translateX(2px); }
.child-item.selected { background-color: #e3f2fd; font-weight: bold; border-color: #3b82f6; }
.child-avatar { 
width: 35px !important;
height: 35px !important;
min-width: 35px !important;
min-height: 35px !important;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ddd;
flex-shrink: 0;
}
.add-child-form { margin-top: 15px; padding-top: 15px; border-top: 2px solid #eee; }
.add-child-input { display: flex; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.add-child-input input { flex-grow: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; min-width: 150px; }
.image-preview { max-width: 120px; max-height: 120px; border-radius: 8px; margin-top: 10px; border: 2px dashed #ccc; object-fit: cover; }
.preview-container { border: 2px dashed #ccc; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 10px auto; background-color: #f9fafb; position: relative; overflow: hidden; }
.header-mic { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mic-btn {
width: 32px;
height: 32px;
border-radius: 6px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: all 0.3s;
flex-shrink: 0;
}
.mic-btn.listening { animation: pulse 1.5s infinite; background: linear-gradient(135deg, #ff5e7d, #ff8a5c); }
.mic-btn.mic-off { background: linear-gradient(135deg, #9ca3af, #6b7280); opacity: 0.7; }
.big-back-btn {
padding: 0.085rem 0.1105rem;
font-size: 0.1071rem;
border-radius: 0.255rem;
background-color: rgb(229, 229, 229);
display: flex;
align-items: center;
gap: 2.72px;
transition: all 0.3s;
border: none;
cursor: pointer;
font-weight: 600;
}
.big-back-btn:hover { background-color: rgb(212, 212, 212); transform: translateX(-4.25px); }
.big-article {
position: fixed;
/* //--AQUI BAJAR: cambia 1.5cm para ajustar la posición vertical */
top: calc(25% + 1.5cm);
left: 50%;
transform: translate(-50%, -50%);
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0;
z-index: 1000;
text-align: center;
/* //=AQUI EL ANCHO/TAMAÑO: +1cm total = 0,5cm por cada cara */
width: calc(50vw + 1cm) !important;
height: calc(50vh + 1cm) !important;
max-width: calc(500px + 1cm) !important;
max-height: calc(500px + 1cm) !important;
display: none;
overflow: visible;
}
.big-article.show {
display: block;
animation: fadeIn 0.3s;
}
.big-article-emoji {
font-size: 150px;
margin-bottom: 5px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.big-article-emoji img {
width: 100%;
height: 100%;
object-fit: contain;
margin: 0;
}
.big-article-text {
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
margin-top: 0;
color: #1f2937;
line-height: 1.3;
text-align: center;
}
.big-article-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
cursor: pointer;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f3f4f6;
transition: all 0.2s;
}
.big-article-close:hover { background: #e5e7eb; transform: none !important; }
@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -40%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(167, 119, 227, 0.7); }
70% { transform: none !important; box-shadow: 0 0 0 15px rgba(167, 119, 227, 0); }
100% { transform: none !important; box-shadow: 0 0 0 0 rgba(167, 119, 227, 0); }
}
.child-indicator {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 15px;
border-radius: 25px;
background-color: #e3f2fd;
margin-left: 12px;
font-size: 14px;
color: #1a56db;
font-weight: 600;
border: 2px solid #a4cafe;
}
.indicator-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #a4cafe; }
.speech-options { display: flex; gap: 12px; margin-top: 15px; flex-wrap: wrap; justify-content: center; }
.speech-option-btn {
padding: 8px 12px;
border-radius: 10px;
background-color: #f1f5f9;
border: 2px solid #cbd5e1;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
text-align: center;
white-space: nowrap;
margin: 2px;
}
.speech-option-btn:hover { background-color: #e2e8f0; transform: translateY(-2px); }
.speech-option-btn.active { background-color: #3b82f6; color: white; border-color: #2563eb; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2); }
.editable-item { position: relative; transition: all 0.3s; border: 2px solid transparent; }
.editable-item:hover { transform: none !important; border-color: #3b82f6; }
.editable-item:hover::after {
content: "✏️";
position: absolute;
top: 8px;
right: 8px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.category-item {
transition: all 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.25rem;
border-radius: 0.8rem;
cursor: pointer;
position: relative;
overflow: hidden;
border: 2px solid transparent;
background: transparent;
aspect-ratio: 1 / 1;
width: 100%;
min-height: 0;
}
.category-item:hover { transform: scale(1.04); box-shadow: none; border-color: transparent; }
.category-item.background-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.category-item.background-image .category-text {
background: rgba(0, 0, 0, 0.7);
padding: 10px 15px;
border-radius: 10px;
color: white;
font-weight: bold;
text-align: center;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.2);
}
.item-button {
transition: all 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.25rem;
border-radius: 0.8rem;
background: transparent;
border: 2px solid transparent;
cursor: pointer;
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
width: 100%;
min-height: 0;
}
.item-button:hover { transform: scale(1.04); box-shadow: none; border-color: transparent; }
.item-button.background-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.item-button.background-image .item-text {
background: rgba(0, 0, 0, 0.7);
padding: 8px 12px;
border-radius: 8px;
color: white;
font-weight: bold;
text-align: center;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.2);
}
input[type="range"] {
-webkit-appearance: none;
height: 10px;
border-radius: 6px;
background: #e5e7eb;
outline: none;
margin: 8px 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
transition: all 0.2s;
border: 2px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
input[type="range"]::-webkit-slider-thumb:hover { background: #2563eb; transform: none !important; }
input[type="range"]::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
transition: all 0.2s;
border: 2px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.scale-root {  transform: none !important;

transform-origin: top center;
will-change: auto;
width: 1200px;
max-width: 95vw;
margin: 0 auto;
}
.size-input {
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 12px;
font-size: 16px;
transition: all 0.2s;
text-align: center;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
width: 140px;
height: 48px;
line-height: 24px;
background: #ffffff;
color: #111827;
}
.size-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; }
.size-input.error { border-color: #ef4444 !important; background-color: #fef2f2 !important; }
.size-input.size-input--sm { width: 120px; height: 44px; padding: 10px; font-size: 15px; }
.size-field { display: grid; gap: 4px; }
.size-field small { color: #6b7280; font-size: 12px; }
.size-input:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }

/* ===== BARRAS STICKY ===== */
.quick-bar-section {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
}

#expressionOptions {
  position: sticky;
  top: 110px;
  z-index: 25;
  background: white;
  border-top: 0.5px solid transparent;
  margin-top: 0.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}


@media (max-width: 768px) {
  .quick-bar-section {
    top: 56px;
  }
  #expressionOptions {
  position: sticky;
  top: 102px;
  z-index: 25;
  background: white;
  border-top: 0.5px solid transparent;
  margin-top: 0.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}


}

@media (max-width: 480px) {
  .quick-bar-section {
    top: 48px;
  }
  #expressionOptions {
  position: sticky;
  top: 110px;
  z-index: 25;
  background: white;
  border-top: 0.5px solid transparent;
  margin-top: 0.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

}
/* ===== FIN BARRAS STICKY ===== */

@media (max-width: 1024px) {
.scale-root { width: 100%; max-width: 100%; padding: 0 8px; transform: none !important; }
.header-mic { gap: 8px; }
.category-item { padding: 0.2rem; }
.big-article { 
  /* //=AQUI EL ANCHO/TAMAÑO: +1cm total = 0,5cm por cada cara */
  width: calc(60vw + 1cm) !important; 
  height: calc(60vh + 1cm) !important;
  max-width: calc(400px + 1cm) !important;
  max-height: calc(400px + 1cm) !important;
}
.big-article-emoji { font-size: 70px; }
.big-article-text { font-size: 24px; }
}
@media (max-width: 768px) {
.scale-root { transform: none !important; width: 100%; padding: 0 4px; }
.header-mic { gap: 6px; }
.category-item { padding: 0.15rem; border-radius: 0.7rem; }
.item-button { padding: 0.15rem; border-radius: 0.7rem; }
.quick-button { padding: 0.5rem; }
.big-article { 
  /* //=AQUI EL ANCHO/TAMAÑO: +1cm total = 0,5cm por cada cara */
  width: calc(70vw + 1cm) !important; 
  height: calc(70vh + 1cm) !important;
  max-width: calc(350px + 1cm) !important;
  max-height: calc(350px + 1cm) !important;
  /* //--AQUI BAJAR: cambia 1.5cm para ajustar la posición vertical */
  top: calc(22% + 1.5cm) !important;
}
.big-article-emoji { font-size: 60px; }
.big-article-text { font-size: 20px; }
.speech-options { gap: 8px; }
.speech-option-btn { min-width: 100px; padding: 6px 12px; font-size: 12px; }
}
@media (max-width: 480px) {
.scale-root { transform: none !important; padding: 0 2px; }
.category-item { padding: 0.1rem; border-radius: 0.6rem; }
.header-mic { flex-direction: column; align-items: stretch; gap: 4px; }
.child-indicator { margin-left: 0; margin-top: 4px; font-size: 12px; padding: 6px 10px; }
.big-article { 
  /* //=AQUI EL ANCHO/TAMAÑO: +1cm total = 0,5cm por cada cara */
  width: calc(85vw + 1cm) !important; 
  height: calc(85vh + 1cm) !important;
  max-width: calc(300px + 1cm) !important;
  max-height: calc(300px + 1cm) !important;
  /* //--AQUI BAJAR: cambia 1.5cm para ajustar la posición vertical */
  top: calc(20% + 1.5cm) !important;
}
.big-article-emoji { font-size: 50px; }
.big-article-text { font-size: 18px; }
.speech-option-btn { min-width: 90px; padding: 5px 10px; font-size: 11px; }
.category-item div:not(.category-text),
.item-button div:not(.item-text) { font-size: 11px; margin-top: 1px; }
.quick-button div { font-size: 12px; }
}
@media (hover: none) and (pointer: coarse) {
.category-item, .item-button, .quick-button { min-height: 44px; }
.btn { min-height: 44px; min-width: 44px; }
.elemento-barra { min-height: 44px; }
}
.fade-in { animation: fadeIn 0.3s ease-in; }
.slide-in { animation: slideIn 0.3s ease-out; }
@keyframes slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.loading { opacity: 0.7; pointer-events: none; position: relative; }
.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.high-contrast { filter: contrast(1.3) brightness(0.9); }
.high-contrast .category-item,
.high-contrast .item-button,
.high-contrast .quick-button { border-color: #111827 !important; }
.json-manager { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: 2px solid #8b5cf6; color: white; }
.json-manager:hover { background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.json-status { padding: 12px; border-radius: 8px; margin: 10px 0; font-weight: 500; }
.json-status.success { background-color: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.json-status.error { background-color: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.json-status.warning { background-color: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.json-status.info { background-color: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.save-indicator {
position: fixed;
bottom: 20px;
right: 20px;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
z-index: 1000;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.save-indicator.show { opacity: 1; transform: translateY(0); }
.save-indicator.saving { background-color: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.save-indicator.saved { background-color: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.save-indicator.error { background-color: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.json-manager-modal { max-width: 500px; }
.json-manager-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
.json-file-input { display: none; }
.json-file-label {
display: block;
padding: 12px 16px;
background-color: #3b82f6;
color: white;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
margin: 10px 0;
}
.json-file-label:hover { background-color: #2563eb; transform: translateY(-1px); }
.json-backup-info { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; margin: 15px 0; }
.json-backup-info h4 { color: #374151; margin-bottom: 8px; font-weight: 600; }
.json-backup-info p { color: #6b7280; font-size: 14px; line-height: 1.5; }
.json-action-btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.json-action-btn.export { background-color: #10b981; color: white; }
.json-action-btn.export:hover { background-color: #059669; transform: translateY(-1px); }
.json-action-btn.import { background-color: #3b82f6; color: white; }
.json-action-btn.import:hover { background-color: #2563eb; transform: translateY(-1px); }
.json-action-btn.reset { background-color: #ef4444; color: white; }
.json-action-btn.reset:hover { background-color: #dc2626; transform: translateY(-1px); }
.json-action-btn.validate { background-color: #f59e0b; color: white; }
.json-action-btn.validate:hover { background-color: #d97706; transform: translateY(-1px); }
.json-loading { position: relative; opacity: 0.7; pointer-events: none; }
.json-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #ffffff;
border-top: 2px solid transparent;
border-radius: 50%;
animation: jsonSpin 1s linear infinite;
}
@keyframes jsonSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.json-toast {
position: fixed;
top: 20px;
right: 20px;
padding: 16px 20px;
border-radius: 8px;
color: white;
font-weight: 500;
z-index: 1000;
opacity: 0;
transform: translateX(100px);
transition: all 0.3s ease;
max-width: 300px;
}
.json-toast.show { opacity: 1; transform: translateX(0); }
.json-toast.success { background-color: #10b981; border: 1px solid #059669; }
.json-toast.error { background-color: #ef4444; border: 1px solid #dc2626; }
.json-toast.warning { background-color: #f59e0b; border: 1px solid #d97706; color: #1f2937; }
.json-toast.info { background-color: #3b82f6; border: 1px solid #2563eb; }
.caregiver-mode-indicator {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #ff5e7d, #ff8a5c);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
z-index: 1000;
opacity: 0;
transition: all 0.3s ease;
}
.caregiver-mode-indicator.show { opacity: 1; top: 20px; }
.caregiver-mode-indicator::before { content: "🔓 "; }
.auto-save-indicator {
position: fixed;
bottom: 60px;
right: 20px;
background-color: #374151;
color: white;
padding: 6px 12px;
border-radius: 12px;
font-size: 12px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 1000;
}
.auto-save-indicator.show { opacity: 0.8; transform: translateY(0); }
.validation-results { margin: 15px 0; padding: 15px; border-radius: 8px; background-color: #f8fafc; border: 1px solid #e2e8f0; }
.validation-result-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e2e8f0; }
.validation-result-item:last-child { border-bottom: none; }
.validation-result-item.success::before { content: "✓"; color: #10b981; font-weight: bold; }
.validation-result-item.error::before { content: "✗"; color: #ef4444; font-weight: bold; }
.validation-result-item.warning::before { content: "⚠"; color: #f59e0b; font-weight: bold; }
@media (max-width: 768px) {
.json-manager-actions { grid-template-columns: 1fr; }
.json-toast { left: 20px; right: 20px; max-width: none; transform: translateY(-100px); }
.json-toast.show { transform: translateY(0); }
.caregiver-mode-indicator { top: 5px; font-size: 14px; padding: 6px 12px; }
.caregiver-mode-indicator.show { top: 15px; }
.save-indicator { bottom: 70px; right: 10px; left: 10px; text-align: center; }
.auto-save-indicator { bottom: 110px; right: 10px; left: 10px; text-align: center; }
}
@media (prefers-color-scheme: dark) {
.json-backup-info { background-color: #374151; border-color: #4b5563; color: #e5e7eb; }
.json-backup-info h4 { color: #f9fafb; }
.json-backup-info p { color: #d1d5db; }
.validation-results { background-color: #374151; border-color: #4b5563; color: #e5e7eb; }
.validation-result-item { border-bottom-color: #4b5563; }
}
.high-contrast .json-action-btn { border: 2px solid currentColor; }
.high-contrast .json-toast { border: 2px solid currentColor; }
.high-contrast .save-indicator { border: 2px solid currentColor; }
.file-drop-zone {
border: 2px dashed #3b82f6;
border-radius: 12px;
padding: 40px 20px;
text-align: center;
background-color: #f8fafc;
transition: all 0.3s ease;
cursor: pointer;
margin: 15px 0;
}
.file-drop-zone:hover { background-color: #e0e7ff; border-color: #2563eb; }
.file-drop-zone.dragover { background-color: #dbeafe; border-color: #1d4ed8; transform: none !important; }
.file-drop-zone.error { border-color: #ef4444; background-color: #fef2f2; }
.file-drop-text { color: #374151; font-size: 16px; margin-bottom: 10px; }
.file-drop-subtext { color: #6b7280; font-size: 14px; }
.file-info { background-color: #e0e7ff; padding: 12px; border-radius: 8px; margin: 10px 0; display: none; }
.file-info.visible { display: block; }
.file-info-name { font-weight: 600; color: #374151; }
.file-info-size { color: #6b7280; font-size: 14px; }
.json-progress { width: 100%; height: 6px; background-color: #e5e7eb; border-radius: 3px; overflow: hidden; margin: 10px 0; }
.json-progress-bar { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); transition: width 0.3s ease; }
.json-progress-text { text-align: center; font-size: 14px; color: #6b7280; margin-top: 5px; }
.json-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.stat-card { background: linear-gradient(135deg, #f8fafc, #e2e8f0); padding: 15px; border-radius: 8px; text-align: center; border: 1px solid #e5e7eb; }
.stat-value { font-size: 24px; font-weight: bold; color: #1f2937; margin-bottom: 5px; }
.stat-label { font-size: 14px; color: #6b7280; }
.json-structure {
background-color: #1f2937;
color: #e5e7eb;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
margin: 15px 0;
max-height: 200px;
overflow-y: auto;
}
.json-key { color: #60a5fa; }
.json-string { color: #86efac; }
.json-number { color: #fbbf24; }
.json-boolean { color: #f472b6; }
.json-null { color: #9ca3af; }
.backup-history { margin: 20px 0; }
.backup-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 8px;
background-color: #f8fafc;
}
.backup-info { flex: 1; }
.backup-name { font-weight: 600; color: #374151; }
.backup-date { font-size: 14px; color: #6b7280; }
.backup-actions { display: flex; gap: 8px; }
.json-error-boundary { background-color: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 20px; margin: 20px 0; }
.json-error-title { color: #dc2626; font-weight: 600; margin-bottom: 10px; }
.json-error-message { color: #7f1d1d; font-family: 'Courier New', monospace; font-size: 14px; background-color: #fee2e2; padding: 10px; border-radius: 4px; overflow-x: auto; }
.json-error-action { margin-top: 15px; display: flex; gap: 10px; }
.json-loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.json-loading-overlay.visible { opacity: 1; pointer-events: all; }
.json-loading-spinner { width: 50px; height: 50px; border: 4px solid #3b82f6; border-top: 4px solid transparent; border-radius: 50%; animation: jsonSpin 1s linear infinite; }
.json-loading-text { color: white; margin-top: 15px; font-weight: 500; }
.schema-validation { margin: 20px 0; }
.schema-rule { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid #e5e7eb; }
.schema-rule:last-child { border-bottom: none; }
.schema-rule.valid::before { content: "✓"; color: #10b981; font-weight: bold; }
.schema-rule.invalid::before { content: "✗"; color: #ef4444; font-weight: bold; }
.schema-rule-description { flex: 1; color: #374151; }
.json-diff { background-color: #1f2937; border-radius: 8px; padding: 15px; margin: 15px 0; overflow-x: auto; }
.diff-added { background-color: #065f46; color: #6ee7b7; padding: 2px 4px; border-radius: 2px; }
.diff-removed { background-color: #7f1d1d; color: #fca5a5; padding: 2px 4px; border-radius: 2px; }
.diff-unchanged { color: #e5e7eb; }
.export-options { margin: 15px 0; }
.export-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid #e5e7eb;
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
}
.export-option:hover { background-color: #f8fafc; border-color: #3b82f6; }
.export-option.selected { background-color: #dbeafe; border-color: #3b82f6; }
.export-option input[type="radio"] { margin: 0; }
.export-option-label { flex: 1; color: #374151; }
.export-option-description { font-size: 14px; color: #6b7280; }
@media (max-width: 640px) {
.json-stats { grid-template-columns: 1fr; }
.stat-card { padding: 12px; }
.stat-value { font-size: 20px; }
.file-drop-zone { padding: 20px 15px; }
.file-drop-text { font-size: 14px; }
.file-drop-subtext { font-size: 12px; }
.backup-item { flex-direction: column; align-items: flex-start; gap: 10px; }
.backup-actions { align-self: flex-end; }
.json-structure { font-size: 12px; padding: 10px; }
.export-option { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media print {
.json-manager-modal, .json-toast, .save-indicator, .auto-save-indicator, .caregiver-mode-indicator { display: none !important; }
.json-structure { background-color: white !important; color: black !important; border: 1px solid #000 !important; }
.json-key { color: #0000ff !important; }
.json-string { color: #008000 !important; }
.json-number { color: #ff8c00 !important; }
}
@media (prefers-reduced-motion: reduce) {
.json-loading-spinner, .save-indicator, .json-toast, .caregiver-mode-indicator, .auto-save-indicator, .file-drop-zone, .export-option { transition: none; animation: none; }
.json-progress-bar { transition: none; }
}
@media (hover: none) and (pointer: coarse) {
.json-action-btn, .export-option { min-height: 44px; }
.file-drop-zone { min-height: 120px; display: flex; flex-direction: column; justify-content: center; }
}
@media (prefers-color-scheme: dark) {
.file-drop-zone { background-color: #374151; border-color: #4b5563; }
.file-drop-zone:hover { background-color: #4b5563; border-color: #6b7280; }
.file-drop-text { color: #e5e7eb; }
.file-drop-subtext { color: #9ca3af; }
.file-info { background-color: #4b5563; }
.file-info-name { color: #e5e7eb; }
.stat-card { background: linear-gradient(135deg, #374151, #4b5563); border-color: #4b5563; }
.stat-value { color: #f9fafb; }
.export-option { border-color: #4b5563; background-color: #374151; }
.export-option:hover { background-color: #4b5563; border-color: #6b7280; }
.export-option.selected { background-color: #1e40af; border-color: #3b82f6; }
.export-option-label { color: #e5e7eb; }
}
.high-contrast .json-structure { border: 2px solid yellow; }
.high-contrast .json-key { font-weight: bold; }
.high-contrast .json-string { text-decoration: underline; }
.high-contrast .stat-card { border: 2px solid currentColor; }
.high-contrast .file-drop-zone { border: 3px dashed currentColor; }
.logo-con-saludo {
background: none;
border: none;
cursor: pointer;
padding: 0.225rem;
border-radius: 12px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
min-width: 45px;
min-height: 45px;
position: relative;
touch-action: manipulation;
}
.logo-con-saludo:hover { background-color: rgba(59, 130, 246, 0.1); transform: none !important; }
.logo-con-saludo:focus { outline: 3px solid #3b82f6; outline-offset: 2px; }
.logo-con-saludo:active { transform: none !important; }
.logo-img {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 8px;
transition: all 0.3s ease;
}
.logo-con-saludo:hover .logo-img { filter: brightness(1.1); }
.logo-con-saludo.blinking {
animation: logoBlink 2s infinite;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
@keyframes logoBlink {
0%, 100% { opacity: 1; transform: none !important; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
50% { opacity: 0.8; transform: none !important; box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
75% { opacity: 0.9; transform: none !important; }
}
@media (max-width: 768px) {
.logo-con-saludo { min-width: 40.5px; min-height: 40.5px; padding: 0.16875rem; }
.logo-img { width: 31.5px; height: 31.5px; }
}
@media (max-width: 480px) {
.logo-con-saludo { min-width: 36px; min-height: 36px; padding: 0.1125rem; }
.logo-img { width: 27px; height: 27px; }
}
.high-contrast .logo-con-saludo { border: 2px solid yellow; }
.high-contrast .logo-con-saludo:focus { outline: 3px solid yellow; }
@media (prefers-reduced-motion: reduce) {
.logo-con-saludo { animation: none; transition: none; }
.logo-con-saludo.blinking { animation: none; opacity: 1; transform: none !important; }
.logo-con-saludo:hover { transform: none; }
}
.footer-wrap { margin-top: 40px; background:#fff; border-top:1px solid #e5e7eb; }
.footer-inner { max-width:72rem; margin:0 auto; padding:32px 16px 64px; display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:1024px){ .footer-inner { grid-template-columns:1fr 1fr; gap:48px; } }
.footer-block { background:#fafafa; border:1px solid #e5e7eb; border-radius:16px; padding:20px; }
.footer-title { font-size:20px; font-weight:700; color:#111827; margin-bottom:12px; }
.footer-toc ul { list-style:none; padding-left:0; margin:0 0 12px; display:grid; gap:6px; }
.footer-toc a { display:inline-block; padding:6px 8px; border-radius:8px; text-decoration:none; color:#1f2937; border:1px dashed #e5e7eb; }
.footer-toc a:hover { background:#e5e7eb; }
.footer-content { color:#374151; display:grid; gap:10px; }
.footer-content h4 { font-weight:700; color:#111827; margin-top:12px; }
.anchor-section { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce){
.logo-con-saludo, .footer-toc a { transition:none; }
}
@media (min-width: 1400px) {
.grid-cat-responsive { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grid-items-responsive { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
.grid-cat-responsive { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.grid-items-responsive { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 767px) and (orientation: landscape) {
.grid-cat-responsive { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.grid-items-responsive { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); }
.category-item, .item-button { padding: 0.1rem; }
}
@supports not (aspect-ratio: 1 / 1) {
.category-item::before { content: ''; display: block; padding-top: 100%; float: left; }
.category-item::after { content: ''; display: block; clear: both; }
.item-button::before { content: ''; display: block; padding-top: 100%; float: left; }
.item-button::after { content: ''; display: block; clear: both; }
}
.category-item.background-image,
.item-button.background-image {
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 0.5rem;
}
.category-item.background-image .category-text,
.item-button.background-image .item-text { margin-bottom: 0.25rem; }

/* ===== AJUSTE FINO: PEGAR EXPRESIONES A LA BARRA RÁPIDA ===== */
.quick-bar-centered{ margin-bottom: 0.3px !important; }
#expressionOptions {
  position: sticky;
  top: 110px;
  z-index: 25;
  background: white;
  border-top: 0.5px solid transparent;
  margin-top: 0.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
#expressionOptions .speech-options{ margin-top: 0 !important; }
/* ===== FIN AJUSTE FINO ===== */

/* ===== PHRASE TOKENS: mini imagen + texto en la Frase ===== */
#phraseText { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.phrase-token { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.6); border: 1px solid rgba(59,130,246,0.25); }
.phrase-icon { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }
.phrase-emoji { font-size: 20px; line-height: 1; }
.phrase-label { font-weight: 700; }
@media (max-width: 480px){
  .phrase-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .phrase-emoji { font-size: 18px; }
}
/* ===== FIN PHRASE TOKENS ===== */

/* ==== NORMALIZACIÓN PROFESIONAL DE ICONOS HEADER ==== */
.barra-superior{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.45rem;
}

.barra-superior .elemento-barra{
  height:41px;
  min-height:41px;
  padding:0.30rem 0.47rem;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.barra-superior button,
.barra-superior a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:41px;
}

.barra-superior span{
  line-height:1;
}

.logo-img{
  height:26px;
  width:auto;
  object-fit:contain;
}

@media (max-width:768px){
  .barra-superior .elemento-barra{
    height:37px;
    min-height:37px;
    padding:0.21rem 0.38rem;
  }
  .barra-superior button,
  .barra-superior a{ height:37px; }
}

@media (max-width:480px){
  .barra-superior .elemento-barra{
    height:34px;
    min-height:34px;
    padding:0.17rem 0.30rem;
  }
  .barra-superior button,
  .barra-superior a{ height:34px; }
}

/* ===== BOTÓN VOLVER FLOTANTE SOLO FLECHAS ===== */
#btnBack{
position: fixed;
left: 8px;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
width: 34px;
height: 34px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding:0;
cursor:pointer;
}

#btnBack:hover{
background: transparent !important;
}

@media (max-width:768px){
#btnBack{
width:30px;
height:30px;
font-size:18px;
left:6px;
}
}
/* ===== FIN BOTÓN VOLVER ===== */
.big-article-emoji img{width:100%;height:100%;object-fit:contain;margin:0;}

/* ===== BOTÓN USUARIO: NOMBRE OCULTO / FOTO A BOTÓN COMPLETO ===== */
#childSelectorBtn {
  position: relative;
  overflow: hidden;
}

/* El nombre sigue existiendo en la aplicación, pero nunca se muestra en este botón. */
#childSelectorBtn #childBtnText {
  display: none !important;
}

/* Sin fotografía: emoji algo mayor, centrado, sin alterar el tamaño del botón. */
#childSelectorBtn #childBtnIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}

/* Con fotografía: ocupar toda la superficie azul/celeste del botón. */
#childSelectorBtn #childBtnIcon.has-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#childSelectorBtn #childBtnIcon.has-photo .child-indicator-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== FIN BOTÓN USUARIO ===== */