/* =============================================
   GENERADOR DE NOMBRES - LIGHT ELEGANTE V3 (ACCESIBLE)
   ============================================= */

:root {
    --bg-main: #f4f5f7;
    --bg-result: #ffffff;
    --bg-input: #f9f9fb;
    
    /* Colores oscurecidos para pasar auditorías de contraste (WCAG AA) */
    --border-color: #c0c4cc;
    --border-input: #8f959e;
    --text-main: #111827;
    --text-label: #374151;
    
    /* Acentos y Botones con alto contraste sobre texto blanco */
    --accent-blue: #2563eb; 
    --btn-aleatorio: #d97706; /* Naranja/Ámbar oscuro */
    --btn-copiar: #047857;    /* Verde esmeralda oscuro */
    --btn-editar: #6d28d9;    /* Morado oscuro */
    --btn-manual: #c2410c;    /* Naranja rojizo oscuro */
}

.generador-nombres-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Formulario principal */
.generador-nombres-form {
    padding: 20px;
    background-color: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
}

.generador-nombres-form > .nombre-manual {
    grid-column: 1 / span 2;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 5px;
}

.generador-nombres-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600; /* Ligeramente más grueso para legibilidad */
    color: var(--text-label);
    font-size: 0.95rem;
    user-select: none;
}

/* Altura optimizada para móviles (44px) y transiciones suaves */
.generador-nombres-form input[type="text"],
.generador-nombres-form select {
    width: 100%;
    padding: 0 12px;
    height: 44px; 
    border: 1px solid var(--border-input);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-main);
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease; 
}

.generador-nombres-form input:focus,
.generador-nombres-form select:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: -1px;
    border-color: var(--accent-blue);
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.4);
}

.row-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ================= RESULTADO ================= */
.generador-nombres-result {
    margin-top: 20px;
    background-color: var(--bg-result);
    padding: 16px;
    border-radius: 16px;
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-main);
    font-weight: normal;
}

/* Contenedor del input resultado y botón aleatorio */
.result-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    position: relative;
}

.generador-nombres-result .input-resultado {
    flex: 1;
    padding: 10px 12px;
    font-size: 1.2rem;
    text-align: center;
    background: var(--bg-input);
    border: 2px solid var(--accent-blue);
    border-radius: 12px;
    color: var(--text-main);
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: auto;
    text-overflow: clip;
    transition: box-shadow 0.3s ease;
}

/* Contador de caracteres integrado */
.generador-nombres-result .char-counter {
    color: #4b5563; /* Gris oscuro para buen contraste */
    font-size: 0.97rem;
    letter-spacing: 0;
    line-height: normal;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

/* Botones Inferiores */
.generador-nombres-result .action-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.generador-nombres-result .action-buttons button,
.generador-nombres-form > .nombre-manual button,
.btn-aleatorio {
    height: 44px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.3s;
}

.generador-nombres-result .action-buttons button {
    padding: 8px 20px;
    font-size: 1rem;
}

.generador-nombres-result .action-buttons button:hover,
.generador-nombres-form > .nombre-manual button:hover,
.btn-aleatorio:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

/* Botón Aleatorio (Dado) */
.btn-aleatorio {
    padding: 0;
    width: 44px;
    font-size: 1.3rem;
    border-radius: 50%;
    background: var(--btn-aleatorio);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Colores de Botones Específicos */
.generador-nombres-result .action-buttons button.copiar {
    background: var(--btn-copiar);
    color: #ffffff;
}

.generador-nombres-result .action-buttons button.editar {
    background: var(--btn-editar);
    color: #ffffff;
}

.generador-nombres-form > .nombre-manual button {
    padding: 0 18px;
    background: var(--btn-manual);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Animación al presionar copiar o editar */
@keyframes boton-flash {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { transform: scale(1.08); box-shadow: 0 0 15px rgba(37, 99, 235, 0.5); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

.generador-nombres-result .action-buttons button.flash {
    animation: boton-flash 0.3s ease-in-out;
}

/* ================= ANIMACIÓN DE LUZ DEL INPUT ================= */
@keyframes luz-recorrido {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.generador-nombres-result input[type="text"].highlight-deluxe {
    background-image: linear-gradient(
        90deg,
        rgba(37,99,235,0) 0%,
        rgba(37,99,235,0.15) 50%,
        rgba(37,99,235,0) 100%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: luz-recorrido 0.8s ease-out;
}

/* RESPONSIVE */
@media (max-width: 520px) {
    .generador-nombres-form {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }
    .generador-nombres-form > .nombre-manual {
        grid-column: 1;
        flex-direction: column;
        align-items: stretch;
    }
    .row-duo {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }
    .generador-nombres-result .input-resultado {
        font-size: 1.1rem;
        padding: 8px 10px;
    }
    .generador-nombres-result .action-buttons {
        flex-wrap: nowrap;
    }
    .generador-nombres-result .action-buttons button {
        padding: 8px 10px;
        font-size: 0.95rem;
        flex: 1;
    }
}