/**
 * Text Designer Font Manager - Dropdown Personalizado de Fuentes
 * 
 * Estilos para el dropdown personalizado que reemplaza al selector original
 * del configurador visual, incluyendo filtros por grupos y preview de fuentes.
 */

/* ==================== CONTENEDOR PRINCIPAL ==================== */
.tdfm-font-selector {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
}

/* ==================== FILTROS DE GRUPOS ==================== */
.tdfm-group-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding: 0;
}

.tdfm-group-btn { margin: 0; }
/* Estado activo: refuerzo visual manteniendo integración con theme/jQuery UI */
/* Activo con look invertido (como el hover del theme: fondo amarillo, texto azul) */
.tdfm-group-filters .ui-button.ui-state-active,
.tdfm-group-filters .ui-button.ui-state-hover {
    background-color: #f6c400; /* amarillo theme aproximado */
    border-color: #003a70;    /* azul theme aproximado */
    color: #003a70;
}
.tdfm-group-filters .ui-button.ui-state-active .ui-button-text,
.tdfm-group-filters .ui-button.ui-state-hover .ui-button-text { color: #003a70; }

/* Estados hover/active heredados del theme */

/* Botón "Todos" con estilo especial */
.tdfm-group-btn[data-group-id="all"] {
    border-color: #28a745;
    color: #28a745;
    font-weight: 600;
}

.tdfm-group-btn[data-group-id="all"]:hover {
    background-color: #d4edda;
    border-color: #1e7e34;
    color: #1e7e34;
}

.tdfm-group-btn[data-group-id="all"].active {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.tdfm-group-btn[data-group-id="all"].active:hover {
    background-color: #1e7e34;
    border-color: #1e7e34;
}

/* ==================== DROPDOWN PERSONALIZADO ==================== */
.tdfm-custom-dropdown {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.tdfm-dropdown-button {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    text-align: left;
}

.tdfm-dropdown-button:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
}

.tdfm-dropdown-button:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.tdfm-font-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.4;
    transition: font-family 0.3s ease;
}

/* Aumentar tamaño del texto dentro del desplegable (x2 respecto a botones) */
.tdfm-custom-dropdown .tdfm-font-text { font-size: 2em; }
/* Evitar que el texto editable haga salto de línea y que crezca hacia la izquierda */
.tdfm-dropdown-button .tdfm-font-text {
  white-space: nowrap;
  display: inline-block;
    direction: ltr !important;
    unicode-bidi: plaintext !important;
    text-align: left !important;
}

/* Placeholder visual cuando no hay texto (no toca el DOM, solo visual) */
.tdfm-dropdown-button .tdfm-font-text:empty:before {
  content: 'Escribe aquí';
  color: #777;
  opacity: .8;
}

/* Alternativa: si JS marca data-empty, mostrar placeholder igualmente */
.tdfm-dropdown-button .tdfm-font-text[data-empty="1"]:before {
  content: 'Escribe aquí';
  color: #777;
  opacity: .8;
}

/* Evitar que el editor mueva el caret al inicio cuando re-renderizamos
   No sobreescribir contenido del editor desde JS durante la escritura */
/* placeholder eliminado para simplificar */

/* Flecha/texto del botón los aporta jQuery UI (.ui-icon, .ui-selectmenu-text) */

/* Lista de opciones */
.tdfm-dropdown-options { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 300px; overflow-y: auto; }

.tdfm-dropdown-option { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 16px; line-height: 1.4; }

.tdfm-dropdown-option:hover { background-color: #f8f9fa; }

.tdfm-dropdown-option.selected { background-color: #007bff; color: #fff; }

.tdfm-dropdown-option.selected:hover { background-color: #0056b3; }

.tdfm-dropdown-option:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

/* Scrollbar personalizada para la lista */
.tdfm-dropdown-options::-webkit-scrollbar {
    width: 8px;
}

.tdfm-dropdown-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.tdfm-dropdown-options::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.tdfm-dropdown-options::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    .tdfm-group-filters {
        gap: 4px;
        padding: 6px;
    }
    
    .tdfm-group-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .tdfm-font-selector {
        max-width: 100%;
    }
    
    .tdfm-dropdown-button {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .tdfm-font-text {
        font-size: 14px;
    }
    
    .tdfm-dropdown-option {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* ==================== ANIMACIONES ==================== */
.tdfm-font-selector {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tdfm-dropdown-options {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================== INDICADORES VISUALES ==================== */
/* Indicador visual de que hay filtros activos */
.tdfm-group-filters:has(.tdfm-group-btn.active:not([data-group-id="all"])) {
    border-left: 4px solid #007bff;
    background-color: #f0f8ff;
}

/* Indicador de carga de fuente */
.tdfm-font-text.loading {
    opacity: 0.6;
    position: relative;
}

.tdfm-font-text.loading::after {
    content: '⟳';
    position: absolute;
    right: 0;
    animation: spin 1s linear infinite;
    color: #007bff;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}