:root {
    /* primary colors */
    --milla-formpage-color-primary-light: #A3A3A3;
    --milla-formpage-color-primary: #F7F7F7;
    --milla-formpage-color-primary-alt: #CFCFCF;
    --milla-formpage-color-primary-dark: #424e00;
    /* secondary colors */
    --milla-formpage-color-secondary-light: #606DA0;
    --milla-formpage-color-secondary: #933400;
    --milla-formpage-color-secondary-dark: #c6cab2;
    --milla-formpage-color-secondary-dark-alt: #e3e5db;
    --milla-formpage-color-primary-dark-alt: #617c37;
}

/*WPH Recipe templates*/
.milla-recipe-wrapper {
    padding: 50px;
    max-width: 1200px;
    margin: auto;
}

#milla-popup-player {
    width: 800px;
}

.milla-carousel {
    max-width: 500px;
    margin: auto;
}

.milla-bordered {
    border: 4px solid;
}

.milla-icon-new {
    font-size: 225px !important;
    padding: 50px 0;
}

/* ===== HEADER STYLES ===== */
.milla-admin-header {
    background: white;
    top: 0;
    z-index: 1000;
}

.milla-header {
    min-height: 150px;
    align-content: center;
    padding: 0 !important;
}

.milla-header-container-logo-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
}

/* Logo styles */
.wp-block-site-logo {
    flex-shrink: 0 !important;
}

.wp-block-site-logo .custom-logo {
    max-width: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

/* Menu Container */
#milla-menu-wrapper {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* ===== MENU STYLES ===== */
.milla-menu-main {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.milla-menu-main li {
    margin: 0 !important;
    padding: 0 !important;
}

.milla-menu-item a {
    position: relative;
    color: var(--milla-formpage-color-primary-dark) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: flex   !important;
    letter-spacing: 1px !important;
    font-size: 20px !important;
    padding: 8px 16px !important;
    border-bottom: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.milla-menu-item a:hover {
    color: var(--milla-formpage-color-primary-dark-alt) !important;
    transform: translateY(-2px);
}

.milla-menu-item.milla-menu-item-active a {
    color: var(--milla-formpage-color-primary-dark) !important;
}

.milla-menu-item.milla-menu-item-active a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 3px;
    background-color: var(--milla-formpage-color-primary-dark);
    transition: background-color 0.3s ease;
    border-radius: 3px;
}

.milla-menu-item.milla-menu-item-active a:hover::after {
    background-color: var(--milla-formpage-color-primary-dark-alt);
}

/* Profile and Logout Menu Items */
.milla-menu-profile,
.milla-menu-logout {
    margin-left: 10px !important;
}

.milla-menu-profile-link,
.milla-menu-logout-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.milla-menu-profile-link:hover {
    background: rgba(97, 124, 55, 0.1) !important;
    transform: scale(1.05) !important;
}

.milla-menu-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.milla-menu-profile-link:hover .milla-menu-avatar {
    border-color: var(--milla-formpage-color-primary-dark) !important;
}

.milla-menu-icon {
    width: 16px !important;
    height: 16px !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.milla-menu-logout-link {
    background: var(--milla-formpage-color-primary-dark) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

.milla-menu-logout-link:hover {
    background: var(--milla-formpage-color-primary-dark-alt) !important;
    transform: scale(1.05) !important;
}

.milla-menu-logout-link:hover .milla-menu-icon {
    color: white !important;
}

.milla-menu-text {
    display: none !important;
}

/* Centrar icono de logout perfectamente */
.milla-menu-logout-link {
    display: flex !important;
}

.milla-menu-logout-link .milla-menu-icon {
    display: block !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

/* ===== RESPONSIVE HEADER & MENU ===== */
@media (max-width: 1200px) {
    .milla-menu-item a {
        font-size: 13px !important;
        padding: 8px 12px !important;
        letter-spacing: 0.5px !important;
    }
    
    .milla-menu-main {
        gap: 10px !important;
    }
    
    .milla-menu-item.milla-menu-item-active a::after {
        left: 12px;
        right: 12px;
    }
}

@media (max-width: 1024px) {
    .milla-header {
        min-height: auto !important;
        padding: 10px 0 !important;
    }
    
    .milla-menu-item a {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    .milla-menu-main {
        gap: 8px !important;
    }
    
    .milla-menu-profile-link,
    .milla-menu-logout-link {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }
    
    .milla-menu-avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }
    
    .milla-menu-icon {
        width: 14px !important;
        height: 14px !important;
    }
}

@media (max-width: 900px) {
    .milla-header-container-logo-menu {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    
    .wp-block-site-logo {
        margin-bottom: 10px !important;
    }
    
    #milla-menu-wrapper {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .milla-menu-main {
        justify-content: center !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    .milla-menu-item a {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 768px) {
    .milla-header {
        padding: 10px 0 !important;
    }
    
    .milla-header-container-logo-menu {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .milla-menu-main {
        gap: 8px !important;
    }
    
    .milla-menu-item a {
        font-size: 11px !important;
        padding: 6px 10px !important;
        letter-spacing: 0.3px !important;
    }
    
    .milla-menu-profile,
    .milla-menu-logout {
        margin-left: 5px !important;
    }
}

@media (max-width: 600px) {
    .wp-block-site-logo .custom-logo {
        max-width: 40px !important;
        max-height: 40px !important;
    }
    
    .milla-menu-main {
        gap: 6px !important;
    }
    
    .milla-menu-item a {
        font-size: 10px !important;
        padding: 6px 8px !important;
        letter-spacing: 0.2px !important;
    }
    
    .milla-menu-profile-link,
    .milla-menu-logout-link {
        width: 28px !important;
        height: 28px !important;
    }
    
    .milla-menu-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .milla-menu-icon {
        width: 12px !important;
        height: 12px !important;
    }
    
    .milla-menu-item.milla-menu-item-active a::after {
        height: 2px !important;
        left: 8px;
        right: 8px;
    }
}

@media (max-width: 480px) {
    .milla-admin-header {
        position: relative !important;
    }
    
    .milla-header-container-logo-menu {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    .wp-block-site-logo {
        margin-bottom: 8px !important;
    }
    
    .milla-menu-main {
        gap: 5px !important;
    }
    
    .milla-menu-item a {
        font-size: 9px !important;
        padding: 5px 6px !important;
        letter-spacing: 0.1px !important;
    }
    
    .milla-menu-profile-link,
    .milla-menu-logout-link {
        width: 26px !important;
        height: 26px !important;
    }
    
    .milla-menu-avatar {
        width: 26px !important;
        height: 26px !important;
        border-width: 1px !important;
    }
    
    .milla-menu-icon {
        width: 10px !important;
        height: 10px !important;
    }
}

/* FORCE LOGOUT BUTTON SIZE - OVERRIDE ALL OTHER STYLES */
.milla-menu-logout-link {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.milla-menu-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .milla-menu-logout-link {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }
    
    .milla-menu-avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }
}

@media (max-width: 600px) {
    .milla-menu-logout-link {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
    
    .milla-menu-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
    }
}

@media (max-width: 480px) {
    .milla-menu-logout-link {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
    }
    
    .milla-menu-avatar {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
    }
}


/*edit point popup*/
#milla-popup-point-edit {
    max-width: 1164px;
}

.point-edit,
.point-new {
    max-width: 1164px;
}

.milla-point-edit-form-item-info {
    margin-bottom: 20px;
}

.milla-point-edit-form-item-image-primary-upload {
    margin-bottom: 20px;
}

.milla-point-edit-form-item-image-primary-upload label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}


.milla-point-edit-form-item-image-primary-upload .milla-upload-area {
    cursor: pointer;
    transition: all 0.3s ease;
}

.milla-point-edit-form-item-image-primary-upload .milla-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.milla-point-edit-form-item-image-primary-upload .milla-upload-content p {
    margin: 0;
    color: #666;
}

.milla-point-edit-form-item-image-primary-upload .button.milla-select-image-button {
    background: #0073aa;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.milla-point-edit-form-item-image-primary-upload .button.milla-select-image-button:hover {
    background: #005a87;
}

.milla-point-edit-form-item-image-primary-upload .milla-select-image-button:hover {
    background: #005a87;
}

.milla-point-edit-form-item-image-primary-upload .milla-select-image-button::before {
    content: "📁";
    margin-right: 5px;
}

.milla-point-edit-form-item-file-images-upload-container .milla-progress-bar {
    width: 100%;
    height: 4px;
}

.milla-point-edit-form-item-file-images-upload-container .milla-progress-text {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.milla-point-edit-form-item-image-primary-upload .milla-image-preview {
    margin-top: 10px;
    text-align: center;
}

.milla-point-edit-form-item-image-primary-upload .milla-image-preview>img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.milla-point-edit-form-item-file-images-upload-container {
    margin-bottom: 20px;
}

.milla-point-edit-form-item-media {
    margin-bottom: 15px;
}

.milla-point-edit-form-item-media label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.milla-point-edit-form-item-info {
    margin-bottom: 15px;
}

.milla-point-edit-form-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}


/* CPT FILTER */
.milla-cpt-search-wrapper {
    padding: 8px 15px;
    transition: all 0.3s ease;
    width: 100%;
}

.milla-cpt-search-toggle {
    color: var(--milla-formpage-color-secondary);
    margin-right: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.milla-cpt-search-toggle:hover {
    color: var(--milla-formpage-color-secondary-dark);
    transform: scale(1.1);
}

.milla-cpt-search-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}

.milla-cpt-search-input:focus {
    box-shadow: none !important;
}

.milla-cpt-search-input::placeholder {
    color: #999;
    font-style: italic;
}

/* Animation for search input */
.milla-cpt-search-input.milla-display-none {
    width: 0;
    opacity: 0;
    margin-right: 0 !important;
}

.milla-cpt-search-input:not(.milla-display-none) {
    width: 90% !important;
    opacity: 1;
    margin-right: 10px !important;
}

/* Smooth transitions for filtered items */
.milla-milla_point-list-item {
    transition: all 0.3s ease;
}

.milla-milla_point-list-item:not(:visible) {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;
}

.milla-point .milla-table-item-image span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CPT FILTER */
.milla-cpt-search-wrapper {
    padding: 8px 15px;
    transition: all 0.3s ease;
    width: 100%;
}

.milla-cpt-search-toggle {
    color: var(--milla-formpage-color-secondary);
    margin-right: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.milla-cpt-search-toggle:hover {
    color: var(--milla-formpage-color-secondary-dark);
    transform: scale(1.1);
}

.milla-cpt-search-input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
}

.milla-cpt-search-input:focus {
    box-shadow: none !important;
}

.milla-cpt-search-input::placeholder {
    color: #999;
    font-style: italic;
}

/* Animation for search input */
.milla-cpt-search-input.milla-display-none {
    width: 0;
    opacity: 0;
    margin-right: 0 !important;
}

.milla-cpt-search-input:not(.milla-display-none) {
    width: 90% !important;
    opacity: 1;
    margin-right: 10px !important;
}

/* Smooth transitions for filtered items */
.milla-milla_point-list-item {
    transition: all 0.3s ease;
}

.milla-milla_point-list-item:not(:visible) {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .milla-cpt-search-container {
        justify-content: center;
    }

    .milla-cpt-search-wrapper {
        max-width: 250px;
    }
}

/* END CPT FILTER */


/* Responsive adjustments */
@media (max-width: 768px) {
    .milla-cpt-search-container {
        justify-content: center;
    }

    .milla-cpt-search-wrapper {
        max-width: 250px;
    }
}

/* END CPT FILTER */

.milla-add-point a {
    display: block;
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 5px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}

.milla-add-point a:hover {
    background: #e9e9e9;
    border-color: #999;
}

.milla-add-point {
    margin-top: 20px;
}

.milla-add-point .milla-display-inline-table {
    vertical-align: middle;
}

.milla-point-edit-form-item-type .select2-container {
    width: 100%;
}

.milla-point-edit-form-item-type .milla-select {
    width: 100%;
}

.milla-point-edit-form-item-type {
    margin-bottom: 20px;
}

.milla-point-view-description img {
    max-width: 100%;
    height: auto;
}

.milla-point-edit-fomr-file-creator-container {
    margin-top: 20px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}

.milla-card-edit-form-item-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.milla-input-field {
    position: relative;
}

/* Primera definición eliminada - consolidada en línea 642 */


.milla-form-grid {
    display: grid;
    grid-template-columns: 450px 1fr;
    grid-template-areas:
        "image-upload main-content"
        "field-create field-create"
    ;
    gap: 40px;
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
}


.milla-card-edit-form-item-image-primary-upload .milla-image-upload-wrapper {
    width: 100%;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.milla-card-edit-form-item-image-primary-upload .milla-upload-area {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    cursor: pointer;
}

.milla-card-edit-form-item-image-primary-upload .milla-upload-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}


.milla-card-edit-form-item-image-primary-upload .milla-upload-content p {
    display: none !important;
}

/* Estilos para el botón principal de selección */
.milla-card-edit-form-item-image-primary-upload .button.milla-select-image-button {
    background: none !important;
    border: none !important;
    padding: 30px !important;
    margin: 0 !important;
    color: var(--milla-formpage-color-primary-light) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 35px !important;
    transition: all 0.3s ease;
}

.milla-card-edit-form-item-image-primary-upload .button.milla-select-image-button:hover {
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 38px !important;
}

.milla-card-edit-form-item-image-primary-upload .milla-select-image-button:hover {
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 38px !important;
}

.milla-card-edit-form-item-image-primary-upload .milla-select-image-button::before {
    display: none !important;
}

.milla-card-edit-form-item-file-images-upload-container .milla-progress-bar {
    background: var(--milla-formpage-color-primary-light) !important;
}

.milla-card-edit-form-item-file-images-upload-container .milla-progress-text {
    margin: 4px !important;
    font-size: 12px !important;
}


.milla-image-preview,
.milla-audio-preview,
.milla-video-preview {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 !important;
    flex-direction: column;
}




/* Área de upload común */
.milla-upload-image-button,
.milla-upload-audio-button,
.milla-upload-video-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px !important;
    background-color: transparent !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 25px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    transition: all 0.3s ease;
}

.milla-upload-image-button:hover,
.milla-upload-audio-button:hover,
.milla-upload-video-button:hover {
    background-color: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Contenido del área de upload */

/* Botones de selección */
.milla-image-upload-wrapper button.milla-select-image-button,
.milla-audio-upload-wrapper button.milla-select-audio-button,
.milla-video-upload-wrapper button.milla-select-video-button,
button.milla-select-image-button,
button.milla-select-audio-button,
button.milla-select-video-button,
.milla-select-image-button,
.milla-select-audio-button,
.milla-select-video-button {
    background: #e0e0e0 !important;
    color: #222 !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.milla-image-upload-wrapper button.milla-select-image-button:hover,
.milla-audio-upload-wrapper button.milla-select-audio-button:hover,
.milla-video-upload-wrapper button.milla-select-video-button:hover,
button.milla-select-image-button:hover,
button.milla-select-audio-button:hover,
button.milla-select-video-button:hover,
.milla-select-image-button:hover,
.milla-select-audio-button:hover,
.milla-select-video-button:hover {
    background: #cccccc !important;
}

.milla-image-upload-wrapper button.milla-select-image-button:active,
.milla-audio-upload-wrapper button.milla-select-audio-button:active,
.milla-video-upload-wrapper button.milla-select-video-button:active,
button.milla-select-image-button:active,
button.milla-select-audio-button:active,
button.milla-select-video-button:active,
.milla-select-image-button:active,
.milla-select-audio-button:active,
.milla-select-video-button:active {
    background: #bdbdbd !important;
}

.milla-image-upload-wrapper button.milla-select-image-button:disabled,
.milla-audio-upload-wrapper button.milla-select-audio-button:disabled,
.milla-video-upload-wrapper button.milla-select-video-button:disabled,
button.milla-select-image-button:disabled,
button.milla-select-audio-button:disabled,
button.milla-select-video-button:disabled,
.milla-select-image-button:disabled,
.milla-select-audio-button:disabled,
.milla-select-video-button:disabled {
    background: #f5f5f5 !important;
    color: #bdbdbd !important;
    cursor: not-allowed !important;
}

/* Columna derecha */
.milla-form-right-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Items del formulario */
.milla-card-edit-form-item-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* Labels */
.milla-card-edit-form-item label {
    color: var(--milla-formpage-color-primary-dark);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    display: block;
}

/* ========================================
   ESTILOS DE INPUTS Y SELECTS (SELECT2)
   Border radius principal: 50px
   ======================================== */
.milla-input,
.milla-select,
.select2-container--default .select2-selection--single {
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important; /* Border radius de todos los selects */
    padding: 12px 15px !important;
    width: 100% !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    background-color: white !important;
}

/* Select2 específico */
.select2-container--default .select2-selection--single {
    height: 48px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 48px !important;
    padding-left: 15px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}

/* Contenedor de coordenadas */
.milla-coordinates-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.milla-btn[type="submit"] {
    background-color: transparent !important;
    border: 2px solid var(--milla-formpage-color-primary-dark) !important;
    border-radius: 25px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    font-weight: 700 !important;
    padding: 8px 30px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.milla-btn[type="submit"]:hover {
    background-color: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
}

/* Estilos para los iconos en los botones */
.milla-upload-image-button::before,
.milla-upload-audio-button::before,
.milla-upload-video-button::before {
    content: 'upload_file';
    font-family: 'Material Icons Outlined';
    font-size: 16px !important;
    margin-right: 6px;
}

/* Responsive */
@media (max-width: 992px) {
    .milla-form-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "image-upload" "main-content";
        gap: 30px;
    }

    .milla-form-left-column {
        max-width: 450px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .milla-form-grid {
        padding: 15px;
    }
}

/*deshabilitar efectos wp*/

.wp-site-blocks :focus {
    outline: none !important;
}

/* Botón de imagen principal transparente */
.milla-card-edit-form-item-image-primary-upload .milla-btn {
    background-color: transparent !important;
    border: 3px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    color: var(--milla-formpage-color-primary-dark);
    padding: 60px 60px;
    text-shadow: none !important;
}

.milla-card-edit-form-item-image-primary-upload .milla-upload-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.milla-card-edit-form-item-image-primary-upload .milla-progress-bar {
    width: 80% !important;
    background: var(--milla-formpage-color-primary-light) !important;
}

.milla-card-edit-form-item-file-images-upload-container .milla-card-edit-form-item-media {
    width: 30%;
}

.milla-card-edit-form-item-file-images-upload-container .milla-image-upload-wrapper,
.milla-card-edit-form-item-file-images-upload-container .milla-video-upload-wrapper,
.milla-card-edit-form-item-file-images-upload-container .milla-audio-upload-wrapper {
    border: 3px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.milla-card-edit-form-item-file-images-upload-container .milla-upload-area {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

.milla-card-edit-form-item-file-images-upload-container .milla-upload-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.milla-card-edit-form-item-file-images-upload-container .milla-upload-content p {
    display: none;
}

.milla-card-edit-form-item-file-images-upload-container .milla-select-image-button,
.milla-card-edit-form-item-file-images-upload-container .milla-select-audio-button,
.milla-card-edit-form-item-file-images-upload-container .milla-select-video-button {
    background: none !important;
    border: none !important;
    padding: 60px !important;
    margin: 0 !important;
    color: var(--milla-formpage-color-primary-light) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 0 !important;
    /* Oculta el texto */

}

.milla-card-edit-form-item-file-images-upload-container .milla-select-image-button::before,
.milla-card-edit-form-item-file-images-upload-container .milla-select-audio-button::before,
.milla-card-edit-form-item-file-images-upload-container .milla-select-video-button::before {
    content: 'upload';
    font-family: 'Material Icons Outlined';
    font-size: 40px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.milla-card-edit-form-item-file-images-upload-container .milla-select-image-button:hover::before,
.milla-card-edit-form-item-file-images-upload-container .milla-select-audio-button:hover::before,
.milla-card-edit-form-item-file-images-upload-container .milla-select-video-button:hover::before {
    color: var(--milla-formpage-color-primary-dark);
    font-size: 48px;
}


/* Clase para mostrar el texto cuando sea necesario */
.milla-card-edit-form-item-file-images-upload-container.show-label .milla-button-text {
    display: block;
    margin-left: 10px;
}

/* Ocultar el texto "Drag & drop..." */
.milla-card-edit-form-item-file-images-upload-container .milla-upload-content p {
    display: none !important;
}

/* Ajustar el contenedor del contenido */
.milla-card-edit-form-item-file-images-upload-container .milla-upload-content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.milla-select-image-button span {
    width: 450px !important;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    cursor: pointer;
    color: var(--milla-formpage-color-primary-alt);
    transition: all 0.3s ease;
}

.milla-select-image-button span:hover {
    color: var(--milla-formpage-color-primary-dark);
    font-size: 38px;
}

.milla-select-image-button {
    background-color: transparent !important;
    border: none !important;
}

/* ========================================
   ESTILOS SELECT2 - DROPDOWN Y SELECTOR
   Border radius: 50px (coincide con línea 644)
   ======================================== */

.select2-container--open {
    z-index: 999999 !important;
}

.select2-container--default .select2-selection--single {
    height: 45px !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    /* border y border-radius heredados de la definición principal (línea 644) */
}

/* ====================================================================
   DROPDOWN SE ABRE HACIA ABAJO (por defecto)
   - Selector: mantiene 50px arriba, 0 abajo (se conecta con dropdown)
   - Dropdown: 0 arriba (conecta con selector), 50px abajo
   ==================================================================== */

/* Selector cuando dropdown está abajo */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-top-left-radius: 50px !important;      /* Mantiene redondeo superior */
    border-top-right-radius: 50px !important;     /* Mantiene redondeo superior */
    border-bottom-left-radius: 0 !important;      /* Sin redondeo abajo (conecta con dropdown) */
    border-bottom-right-radius: 0 !important;     /* Sin redondeo abajo (conecta con dropdown) */
}

/* Dropdown cuando está abajo */
.select2-container--default.select2-container--below .select2-dropdown,
.select2-container--default .select2-dropdown--below {
    z-index: 999999 !important;
    margin-top: -2px !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-top: none !important;                   /* Sin borde arriba (conecta con selector) */
    border-top-left-radius: 0 !important;          /* Sin redondeo arriba (conecta con selector) */
    border-top-right-radius: 0 !important;         /* Sin redondeo arriba (conecta con selector) */
    border-bottom-left-radius: 50px !important;    /* Redondeo inferior */
    border-bottom-right-radius: 50px !important;   /* Redondeo inferior */
    background-color: var(--milla-formpage-color-primary) !important;
}

/* ====================================================================
   DROPDOWN SE ABRE HACIA ARRIBA
   - Selector: 0 arriba (conecta con dropdown), 50px abajo
   - Dropdown: 50px arriba, 0 abajo (conecta con selector)
   ==================================================================== */

/* Selector cuando dropdown está arriba */
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0 !important;          /* Sin redondeo arriba (conecta con dropdown) */
    border-top-right-radius: 0 !important;         /* Sin redondeo arriba (conecta con dropdown) */
    border-bottom-left-radius: 50px !important;    /* Mantiene redondeo inferior */
    border-bottom-right-radius: 50px !important;   /* Mantiene redondeo inferior */
}

/* Dropdown cuando está arriba */
.select2-container--default.select2-container--above .select2-dropdown,
.select2-container--default .select2-dropdown--above {
    z-index: 999999 !important;
    margin-bottom: -2px !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-bottom: none !important;                /* Sin borde abajo (conecta con selector) */
    border-top-left-radius: 50px !important;       /* Redondeo superior */
    border-top-right-radius: 50px !important;      /* Redondeo superior */
    border-bottom-left-radius: 0 !important;       /* Sin redondeo abajo (conecta con selector) */
    border-bottom-right-radius: 0 !important;      /* Sin redondeo abajo (conecta con selector) */
    background-color: var(--milla-formpage-color-primary) !important;
}

/* Fallback genérico para select2-dropdown (sin clase below/above) */
.select2-container--default .select2-dropdown {
    z-index: 999999 !important;
    background-color: var(--milla-formpage-color-primary) !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
}


/* Flecha del select */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 14px !important;
}

/* Texto del select */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100% !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Opciones del dropdown */
.select2-container--default .select2-results__option {
    padding: 8px 30px !important;
    color: black !important;
    font-size: 18px !important;
}

/* Botón de limpiar selección */
.select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 18px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
}

/* Opción seleccionada o hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: transparent !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: transparent !important;
}

/* Contenedor de resultados */
.select2-results {
    padding: 8px 0 !important;
}


/* card list  */

/* Contenedor principal de la lista */
.milla-card-list {
    width: 80% !important;
    margin: 0 auto !important;
    max-width: none !important;
}



/* Iconos en los botones */
.milla-table-item-actions-buttons .milla-icon,
.milla-table-item-actions-buttons i {
    color: white !important;
    font-size: 22px !important;
    font-weight: bold;
}

.milla-area-checkbox input[type="checkbox"] {
    font: inherit !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    width: 1.15em !important;
    height: 1.15em !important;
    border: 0.15em solid var(--milla-formpage-color-primary-dark) !important;
    border-radius: 0.15em !important;
    transform: translateY(-0.075em) !important;
}

.milla-area-checkbox input[type="checkbox"]:checked {
    background-color: var(--milla-formpage-color-primary-dark) !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 1600px) {
    .milla-card .milla-table-item-image span img {
        width: 100% !important;
    }

    .milla-table-item-actions {
        padding: 20px 35px 20px 10px;
    }

    .milla-table-item-actions-title span {
        font-size: 20px;
    }

    .milla-table-item-actions-buttons .milla-icon,
    .milla-table-item-actions-buttons i {
        font-size: 28px !important;
    }
}

@media (max-width: 1440px) {
    .milla-table-item-actions {
        padding: 20px 25px 20px 0px;
    }

    .milla-table-item-actions-title span {
        font-size: 20px;
    }

    .milla-table-item-actions-buttons .milla-icon,
    .milla-table-item-actions-buttons i {
        font-size: 24px !important;
    }
}


@media (max-width: 1200px) {
    .milla-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .milla-table-item-actions {
        padding: 20px 30px 20px 10px;
    }

    .milla-table-item-actions-title span {
        font-size: 19px;
    }

    .milla-table-item-actions-buttons .milla-icon,
    .milla-table-item-actions-buttons i {
        font-size: 22px !important;
    }
}

@media (max-width: 992px) {
    .milla-cards {
        grid-template-columns: 1fr !important;
    }

    .milla-card .milla-table-item-image span img {
        width: 140% !important;
    }

    .milla-table-item-actions {
        min-height: 100px !important;
        padding: 20px 30px 20px 80px;
    }

    .milla-table-item-actions-title span {
        font-size: 19px;
    }

    .milla-table-item-actions-buttons .milla-icon,
    .milla-table-item-actions-buttons i {
        font-size: 20px !important;
    }
}

@media (max-width: 768px) {
    .milla-cards {
        grid-template-columns: 1fr !important;
    }

    .milla-card .milla-table-item-image span img {
        width: 110% !important;
    }

    .milla-table-item-actions {
        padding: 20px 30px 20px 20px;
    }

    .milla-table-item-actions-title span {
        font-size: 19px;
    }
}

@media (max-width: 480px) {

    .milla-table-item-actions {
        padding: 20px 30px 20px 0px;
    }

    .milla-table-item-actions-title span {
        font-size: 18px;
    }

    .milla-card .milla-table-item-image span img {
        width: 80% !important;
    }

}

/* Estilo para el botón de añadir nueva tarjeta */
.milla-add-card a {
    background-color: transparent;
    border: 2px solid var(--milla-formpage-color-primary-dark);
    border-radius: 20px;
    color: var(--milla-formpage-color-primary-dark);
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none !important;
    display: inline-block;
    font-size: 14px;
}

.milla-add-card a:hover {
    background-color: var(--milla-formpage-color-secondary-dark);
    color: var(--milla-formpage-color-primary);
}

.milla-add-card {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Ajuste del texto dentro del botón */
.milla-add-card .milla-display-inline-table {
    text-align: center;
    width: auto !important;
}

.milla-content-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#wp--skip-link--target {
    margin-top: 0 !important;
}

.milla-display-menu {
    display: none !important;
}

.milla-table-item {
    display: flex;
    justify-content: space-around;
    padding: 45px;
    border: 1px solid;
    border-radius: 20px;
    border-color: var(--milla-formpage-color-secondary-dark);
    width: 100% !important;
}

.milla-header-container-logo-menu{
    max-width: 80% !important;
    
}

/* Interest Area Display */
.milla-interest-area-display {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 9999;
}

.milla-interest-area-display .milla-current-area {
    margin-bottom: 10px;
}

.milla-interest-area-display .milla-current-area small {
    display: block;
    margin-bottom: 5px;
    color: var(--milla-formpage-color-primary-dark);
}

.milla-interest-area-display .milla-current-area p {
    margin: 0;
    font-weight: bold;
    color: var(--milla-formpage-color-primary-dark);
}

.milla-interest-area-display .milla-change-area {
    margin-top: 10px;
}

.milla-interest-area-display .milla-btn-mini {
    padding: 5px 10px;
    font-size: 14px;
    background-color: var(--milla-formpage-color-primary-dark);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.milla-interest-area-display .milla-btn-mini:hover {
    background-color: var(--milla-formpage-color-primary-dark-alt);
}

/* Ajustes específicos para el textarea */
textarea.milla-input {
    resize: vertical;
}

/* Estilo específico para el select de tipo de tarjeta */
.milla-card-edit-form-item-type .select2-container {
    width: 50% !important;
}

.milla-card-edit-form-item-type .milla-select {
    width: 50% !important;
}

.milla-card-edit-form-item-type {
    width: 100% !important;
}

.milla-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 30px;
    /* Espacio entre filas y columnas */
    align-items: flex-start;
    margin-bottom: 10px;
}

.milla-preview-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f7f7f7;
    border-radius: 12px;
    padding: 10px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    gap: 16px;
}

.milla-preview-item img {
    max-width: 120px;
    height: auto;
    border-radius: 8px;
    margin: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.milla-preview-item .milla-remove-single-image {
    margin-left: 0;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.milla-preview-item .milla-remove-single-image:hover {
    background: #c0392b;
}

.milla-remove-image-button {
    display: block;
    margin-left: auto;
    margin-top: 12px;
    background: #933400;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.milla-remove-image-button:hover {
    background: #606DA0;
}

.milla-card-view-description img {
    width: 60% !important;
    border-radius: 15px;
}

/* Ajustes para contenedor campos personalizados */
.milla-card-edit-fomr-file-creator-container {
    grid-area: field-create;
}

.milla-field-creator {
    border: 3px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
}

.milla-field-creator-type {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.milla-field-type-selector {
    margin-bottom: 10px;
}

.milla-field-creator-container .milla-field-type-selector,
.milla-field-creator-container .milla-field-label,
.milla-field-creator-container .milla-field-placeholder {
    font-family: var(--wp--preset--font-family--sora);
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    font-size: 14px !important;
    color: #495057 !important;
    background-color: white !important;
    outline: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}
.milla-field-creator-container .milla-field-placeholder {
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    font-size: 14px !important;
    color: #495057 !important;
    background-color: white !important;
    outline: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.milla-field-creator-container .milla-field-label,
.milla-field-creator-container .milla-created-field[data-field-type="separator"] .milla-field-value-display {
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    font-size: 14px !important;
    background-color: white !important;
    outline: none !important;
    color: #495057 !important;
    display: block !important;
    margin-bottom: 10px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}


.milla-field-label:focus {
    outline: none !important;
    border-color: var(--milla-formpage-color-secondary-dark) !important;
    box-shadow: none !important;
}

.milla-field-options-settings {
    border: 3px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
}

.milla-option-item {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Estilos movidos a la sección de field creator más abajo */

/* También para los otros inputs del formulario */
.milla-field-type-selector:focus,
.milla-field-label:focus,
.milla-field-placeholder:focus {
    outline: none !important;
    border-color: var(--milla-formpage-color-secondary-dark) !important;
    box-shadow: none !important;
}

.milla-remove-option {
    background: none !important;
    border: none !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    cursor: pointer;
}

.milla-add-option {
    background: none !important;
    border: 2px solid var(--milla-formpage-color-primary-dark) !important;
    border-radius: 25px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    padding: 8px 30px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.milla-add-option:hover {
    background-color: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
}

.milla-created-field {
    border: 3px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 15px;
}

.milla-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.milla-field-type,
.milla-field-label {
    color: var(--milla-formpage-color-primary-dark);
    font-size: 16px;
    font-weight: bold;
}

.milla-field-actions {
    display: flex;
    gap: 10px;
}

.milla-edit-field,
.milla-remove-field {
    background: none !important;
    border: 2px solid var(--milla-formpage-color-primary-dark) !important;
    border-radius: 25px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    padding: 8px 30px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.milla-edit-field:hover,
.milla-remove-field:hover {
    background-color: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
}

.milla-field-options {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--milla-formpage-color-primary);
    border-radius: 25px;
}

/* Estilos movidos a la sección de field creator más abajo */

/* Estilos movidos a la sección de field creator más abajo */

.milla-add-field {
    background: none !important;
    border: 2px solid var(--milla-formpage-color-primary-dark) !important;
    border-radius: 25px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    padding: 8px 30px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 20px;
    width: 100%;
}

.milla-add-field:hover {
    background-color: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
}

.milla-field-basic-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.milla-field-basic-settings input {
    width: 100%;
}

/* ============================================
   CONFIG TABS STYLES - BASADO EN EL MOCKUP
   ============================================ */

/* === CONTENEDOR PRINCIPAL === */
.milla-config {
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
    background: #f6f6f4 !important; /* Color de fondo del mockup */
    padding: 45px 150px;
    border-radius: 20px;
}

/* === WRAPPER DE TABS === */
.milla-tabs-wrapper {
    margin-bottom: 40px;
}

/* === CONTENEDOR DE TABS === */
.milla-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    padding: 0;
    background: none;
    border: none;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* === BOTONES DE TABS === */
.milla-tab-links {
    background: var(--milla-formpage-color-primary-dark) !important; /* Verde oliva del mockup */
    color: white !important;
    border: 1px solid var(--milla-formpage-color-primary-dark) !important;
    border-radius: 50px;
    padding: 8px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
}




.milla-tab-links:hover {
    background: #8a9b5a !important; /* Verde oliva claro */
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(97, 124, 55, 0.3);
}

.milla-tab-links.active {
    background: #f8f8f5 !important; /* Fondo claro del mockup */
    color: #617c37 !important; /* Texto verde oliva */
    border: 1px solid #617c37 !important;
    box-shadow: 0 2px 8px rgba(97, 124, 55, 0.2);
}



/* === CONTENIDO DE TABS === */
.milla-tab-content {
    background: white;
    border-radius: 50px;
    padding: 20px 50px;
    border: 1px solid var(--milla-formpage-color-primary-dark);
    margin-top: 20px;
    display: block;
}

.milla-tab-content.milla-display-none {
    display: none !important;
}

/* === ESTILOS DE ENCABEZADOS Y SEPARADORES === */

/* Descripción de tabs */
.milla-tab-content-description {
    color: var(--milla-formpage-color-primary-dark);
    margin-bottom: 20px;
    line-height: 1.6;
    opacity: 0.85;
}

/* Separador horizontal */
.milla-hr {
    border: none;
    border-top: 3px solid var(--milla-formpage-color-primary-dark);
    margin: 25px 0;
    opacity: 0.3;
    padding-bottom: 1rem;
    
}

/* === ESTILOS ESPECÍFICOS DEL CONTENIDO === */
.milla-tab-content h1,
.milla-tab-content h2,
.milla-tab-content h3,
.milla-tab-content h4,
.milla-tab-content h5,
.milla-tab-content h6 {
    color: var(--milla-formpage-color-primary-dark);
    margin-bottom: 20px;
}

.milla-tab-content h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

.milla-tab-content p {
    color: var(--milla-formpage-color-primary-dark);
    line-height: 1.6;
    margin-bottom: 15px;
}

/* === FORMULARIOS DENTRO DE TABS === */

.milla-tab-content .milla-form-group {
    margin-bottom: 20px;
}

.milla-tab-content .milla-form-label {
    color: var(--milla-formpage-color-primary-dark);
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.milla-tab-content .milla-form-input,
.milla-tab-content .milla-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    background: white;
    transition: all 0.3s ease;
}

.milla-tab-content .milla-form-input:focus,
.milla-tab-content .milla-field:focus {
    outline: none;
    border-color: #617c37;
    box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.1);
}

/* === BOTONES === */
/* Estilos de .milla-tab-content .milla-btn consolidados con los estilos principales de .milla-btn */

/* === RESPONSIVE TABS === */
@media (max-width: 1200px) {
    .milla-tab-links {
        font-size: 15px !important;
        padding: 8px 20px !important;
    }
}

@media (max-width: 1024px) {
    .milla-tab-links {
        font-size: 14px !important;
        padding: 8px 18px !important;
    }
    
    .milla-tab-content {
        padding: 20px 40px !important;
    }
}

@media (max-width: 900px) {
    .milla-tabs {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .milla-tab-links {
        font-size: 13px !important;
        padding: 8px 16px !important;
        flex: 1 !important;
        min-width: 120px !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .milla-config {
        padding: 20px;
    }
    
    .milla-tabs {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    .milla-tab-links {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        flex: none !important;
        min-width: auto !important;
    }
    
    .milla-tab-content {
        padding: 20px !important;
    }
}

@media (max-width: 600px) {
    .milla-tab-links {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .milla-tab-content {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .milla-tab-links {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .milla-tab-content {
        padding: 12px !important;
    }
}

/* ============================================
   CONTENIDO ESPECÍFICO DE TABS
   ============================================ */

/* === INTEREST AREA STYLES === */




.milla-tab-content .milla-input-wrapper {
    margin-bottom: 20px;
}

.milla-tab-content .milla-input-wrapper label {
    color: var(--milla-formpage-color-primary-dark);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    font-size: 16px;
}

.milla-tab-content .milla-field {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    font-size: 16px;
    color: var(--milla-formpage-color-primary-dark);
    background: white;
    transition: all 0.3s ease;
}

.milla-tab-content .milla-field:focus {
    outline: none !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
    box-shadow: none !important;
}

.milla-tab-content .milla-field:hover {
    border-color: var(--milla-formpage-color-primary-dark);
}

/* === LISTAS DE ELEMENTOS === */
.milla-tab-content .milla-interest-areas,
.milla-tab-content .milla-services,
.milla-tab-content .milla-topics {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* === BOTONES DE ACCIÓN === */
.milla-tab-content .milla-menu-more-btn {
    color: #617c37;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.milla-tab-content .milla-menu-more-btn:hover {
    background: #f0f0f0;
    color: #8a9b5a;
}

/* === MENÚS DESPLEGABLES === */
.milla-tab-content .milla-menu-more {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 200px;
    display: none;
}

.milla-tab-content .milla-menu-more.show {
    display: block;
}

.milla-tab-content .milla-menu-more ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.milla-tab-content .milla-menu-more li {
    border-bottom: 1px solid #f0f0f0;
}

.milla-tab-content .milla-menu-more li:last-child {
    border-bottom: none;
}

.milla-tab-content .milla-menu-more a {
    display: block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.milla-tab-content .milla-menu-more a:hover {
    background: #f8f8f5;
    color: #617c37;
}

/* === ICONOS === */
.milla-tab-content .material-icons-outlined {
    color: #617c37;
    font-size: 24px;
}

.milla-tab-content .material-icons-outlined:hover {
    color: #8a9b5a;
}

/* === BOTÓN AGREGAR === */
.milla-tab-content .milla-mt-50 {
    margin-top: 30px;
    text-align: center;
}

.milla-add-new-btn {
    display: inline-block !important;
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    max-width: 300px !important;
    width: auto !important;
    text-align: center !important;
}

.milla-add-new-btn:hover {
    background: var(--milla-formpage-color-primary-dark-alt) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(97, 124, 55, 0.3) !important;
}

.milla-add-new-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.milla-tab-content .milla-mt-50 a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #617c37;
    color: white;
    padding: 15px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.milla-tab-content .milla-mt-50 a:hover {
    background: #8a9b5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 124, 55, 0.3);
}

/* === RESPONSIVE PARA BOTÓN AGREGAR === */
@media (max-width: 768px) {
    .milla-add-new-btn {
        font-size: 14px !important;
        padding: 12px 24px !important;
    }
}

/* === RESPONSIVE PARA CONTENIDO === */
@media (max-width: 768px) {
    .milla-tab-content .milla-interest-area,
    .milla-tab-content .milla-service,
    .milla-tab-content .milla-topic {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .milla-tab-content .milla-menu-more {
        position: relative;
        right: auto;
        top: auto;
        margin-top: 10px;
    }
}

/* ============================================
   FORMULARIOS DE USUARIOS
   ============================================ */

/* Los estilos del User Creator están en milla-users-creator.css */
/* Los estilos del User Editor están en milla-users-editor.css */

.milla-interest-area .milla-display-inline-table {
    vertical-align: middle;
}


.milla-navigator-previous,
.milla-navigator-next {
    font-size: 16px;
    font-weight: 500;
}

.milla-interest-area .milla-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.milla-interest-area .milla-input-wrapper {
    width: 60%;
    margin: 0 auto;
}
#milla_interest_area .milla-input-field-select{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 60%;
    margin: 0 auto;  
} 

#milla_interest_area .milla-input-field-select > div:first-child {
    flex: 0 0 30%;
}

#milla_interest_area .milla-input-field-select > div:last-child {
    flex: 0 0 70%;
}
.milla-interest-area .milla-field {
    width: 100%;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    background-color: white !important;
}

.milla-interest-area .milla-field:focus {
    outline: none !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
    box-shadow: none !important;
}

.milla-interest-area .milla-field:hover {
    border-color: var(--milla-formpage-color-primary-dark);
}

/* === ESTILOS MODERNOS PARA LISTAS === */
.milla-interest-areas,
.milla-services,
/* Estilos de grid movidos más abajo, cerca de las tarjetas */

.milla-interest-area,
.milla-service,
.milla-topic {
    padding: 20px;
}


.milla-interest-area a,
.milla-service a,
.milla-topic a {
    color: var(--milla-formpage-color-primary-dark);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.milla-interest-area a:hover,
.milla-service a:hover,
.milla-topic a:hover {
    color: var(--milla-formpage-color-primary-dark-alt);
}

/* === ESTILOS PARA TARJETAS CON BOTONES DIRECTOS === */
.milla-service-card,
.milla-topic-card,
.milla-point-card,
.milla-route-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    display: flex;
    height: 200px;
    width: 100%;
}

.milla-service-card:hover,
.milla-topic-card:hover,
.milla-point-card:hover,
.milla-route-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Imagen a la izquierda (1/3 del ancho) */
.milla-service-card-image,
.milla-topic-card-image,
.milla-point-card-image,
.milla-route-card-image {
    width: 33.333%;
    flex-shrink: 0; /* No permitir que se encoja */
    position: relative;
    background-color: #f5f5f5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilos para las imágenes dentro */
.milla-service-card-img,
.milla-topic-card-img,
.milla-point-card-img,
.milla-route-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Panel de contenido a la derecha (2/3 del ancho) */
.milla-service-card-content,
.milla-topic-card-content,
.milla-point-card-content,
.milla-route-card-content {
    width: 66.666%;
    flex-shrink: 1; /* Permitir que se encoja si es necesario */
    min-width: 0; /* Permitir que el contenido se ajuste */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden; /* Evitar desbordamiento */
}

/* Colores de fondo para diferentes tipos */
.milla-service-card-content {
    background: var(--milla-formpage-color-primary-dark);
}

.milla-topic-card-content {
    background: var(--milla-formpage-color-secondary);
}

.milla-point-card-content {
    background: var(--milla-formpage-color-primary-dark-alt);
}

.milla-route-card-content {
    background: var(--milla-formpage-color-secondary-light);
}

/* === HEADER DE LISTAS CON BOTÓN "AÑADIR" A LA DERECHA === */
.milla-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.milla-list-header-text {
    flex: 1;
}

.milla-list-header-text h2 {
    margin-bottom: 8px;
}

.milla-list-header-text p {
    margin: 0;
}

.milla-list-header-actions {
    flex-shrink: 0;
}

/* Responsive para header */
@media (max-width: 768px) {
    .milla-list-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .milla-list-header-actions {
        width: 100%;
    }
    
    .milla-list-header-actions .milla-add-new-btn {
        width: 100%;
        text-align: center;
    }
}

/* === LISTAS SIMPLES PARA SERVICIOS, TEMAS E INTEREST AREAS (sin fondo de color) === */
.milla-service-simple,
.milla-topic-simple,
.milla-interest-area-simple {
    background: white;
    border: 2px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}


.milla-service-simple-title,
.milla-topic-simple-title,
.milla-interest-area-simple-title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--milla-formpage-color-primary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.milla-service-simple-actions,
.milla-topic-simple-actions,
.milla-interest-area-simple-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}


.milla-interest-area-simple-title .milla-timed {
    font-size: 18px;
    color: var(--milla-formpage-color-primary-dark);
    opacity: 0.7;
}

/* Botones para servicios, temas e interest areas - VERDES */
.milla-service-simple .milla-service-edit-btn,
.milla-topic-simple .milla-topic-edit-btn,
.milla-interest-area-simple .milla-interest-area-edit-btn {
    background: white;
    border: 2px solid var(--milla-formpage-color-primary-dark);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.milla-service-simple .milla-service-edit-btn::before,
.milla-topic-simple .milla-topic-edit-btn::before,
.milla-interest-area-simple .milla-interest-area-edit-btn::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--milla-formpage-color-primary-dark);
    -webkit-mask: url('/wp-content/plugins/milla/assets/media/milla-icon-edit.svg') no-repeat center center;
    mask: url('/wp-content/plugins/milla/assets/media/milla-icon-edit.svg') no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.milla-service-simple .milla-service-edit-btn:hover,
.milla-topic-simple .milla-topic-edit-btn:hover,
.milla-interest-area-simple .milla-interest-area-edit-btn:hover {
    transform: scale(1.1);
    background: var(--milla-formpage-color-primary-dark) !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
}

.milla-service-simple .milla-service-edit-btn:hover::before,
.milla-topic-simple .milla-topic-edit-btn:hover::before,
.milla-interest-area-simple .milla-interest-area-edit-btn:hover::before {
    background: white !important;
}

.milla-service-simple .milla-service-delete-btn,
.milla-topic-simple .milla-topic-delete-btn,
.milla-interest-area-simple .milla-interest-area-delete-btn {
    background: white;
    border: 2px solid var(--milla-formpage-color-primary-dark);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.milla-service-simple .milla-service-delete-btn::before,
.milla-topic-simple .milla-topic-delete-btn::before,
.milla-interest-area-simple .milla-interest-area-delete-btn::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--milla-formpage-color-primary-dark);
    -webkit-mask: url('/wp-content/plugins/milla/assets/media/milla-icon-delete.svg') no-repeat center center;
    mask: url('/wp-content/plugins/milla/assets/media/milla-icon-delete.svg') no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.milla-service-simple .milla-service-delete-btn:hover,
.milla-topic-simple .milla-topic-delete-btn:hover,
.milla-interest-area-simple .milla-interest-area-delete-btn:hover {
    transform: scale(1.1);
    background: #dc3545 !important;
    border-color: #dc3545 !important;
}

.milla-service-simple .milla-service-delete-btn:hover::before,
.milla-topic-simple .milla-topic-delete-btn:hover::before,
.milla-interest-area-simple .milla-interest-area-delete-btn:hover::before {
    background: white !important;
}

/* Ocultar texto en botones de editar y borrar de interest areas */
.milla-interest-area-simple .milla-interest-area-edit-btn i,
.milla-interest-area-simple .milla-interest-area-edit-btn span,
.milla-interest-area-simple .milla-interest-area-delete-btn i,
.milla-interest-area-simple .milla-interest-area-delete-btn span {
    display: none !important;
}

/* Ocultar texto e iconos de Material en botones simples */
.milla-service-simple .milla-service-btn i,
.milla-service-simple .milla-service-btn span,
.milla-topic-simple .milla-topic-btn i,
.milla-topic-simple .milla-topic-btn span {
    display: none !important;
}

/* Responsive para listas simples */
@media (max-width: 768px) {
    .milla-service-simple,
    .milla-topic-simple,
    .milla-interest-area-simple {
        padding: 12px 16px;
    }
    
    .milla-service-simple-title,
    .milla-topic-simple-title,
    .milla-interest-area-simple-title {
    font-size: 14px;
    }
    
    .milla-service-simple .milla-service-edit-btn,
    .milla-service-simple .milla-service-delete-btn,
    .milla-topic-simple .milla-topic-edit-btn,
    .milla-topic-simple .milla-topic-delete-btn,
    .milla-interest-area-simple .milla-interest-area-edit-btn,
    .milla-interest-area-simple .milla-interest-area-delete-btn {
        width: 32px;
        height: 32px;
    }
    
    .milla-service-simple .milla-service-edit-btn::before,
    .milla-service-simple .milla-service-delete-btn::before,
    .milla-topic-simple .milla-topic-edit-btn::before,
    .milla-topic-simple .milla-topic-delete-btn::before,
    .milla-interest-area-simple .milla-interest-area-edit-btn::before,
    .milla-interest-area-simple .milla-interest-area-delete-btn::before {
        width: 16px;
        height: 16px;
    }
}

/* === ESTILOS PARA CAMPOS DINÁMICOS === */
.milla-dynamic-fields-container {
    background: white;
    padding: 0;
}

.milla-dynamic-fields-container .milla-input-wrapper {
    border-bottom: 1px solid var(--milla-formpage-color-secondary-dark);
    background: white;
    min-height: 60px;
}

.milla-dynamic-fields-container .milla-input-wrapper:last-child {
    border-bottom: none;
}

/* Los campos dinámicos ahora tienen la misma estructura 40/60 que los campos normales */
.milla-dynamic-fields-container input[type="text"],
.milla-dynamic-fields-container input[type="email"],
.milla-dynamic-fields-container input[type="number"],
.milla-dynamic-fields-container input[type="url"],
.milla-dynamic-fields-container textarea,
.milla-dynamic-fields-container select {
    width: 100% !important;
    padding: 10px 16px !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    color: #495057 !important;
    background: white !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}


/* Estados de focus para campos dinámicos */
.milla-dynamic-fields-container input:focus,
.milla-dynamic-fields-container textarea:focus,
.milla-dynamic-fields-container select:focus {
    border-color: var(--milla-formpage-color-primary-dark) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.1) !important;
}

/* Checkboxes en campos dinámicos */
.milla-dynamic-fields-container .milla-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-top: 4px;
}

.milla-dynamic-fields-container input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 0.35em !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
}

/* Textareas en campos dinámicos */
.milla-dynamic-fields-container textarea {
    min-height: 100px;
    resize: vertical;
    border-radius: 20px !important;
}

.milla-service-card-header,
.milla-topic-card-header,
.milla-point-card-header,
.milla-route-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.milla-service-card-title,
.milla-topic-card-title,
.milla-point-card-title,
.milla-route-card-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Máximo 2 líneas */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-word;
}

.milla-service-card-actions,
.milla-topic-card-actions,
.milla-point-card-actions,
.milla-route-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 15px;
    justify-content: flex-end;
}

/* Responsive para GRID - 3 columnas por defecto */
.milla-services,
.milla-topics,
.milla-interest-areas,
.milla-points,
.milla-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding: 0;
}

/* Asegurar que los items de lista no desborden */
.milla-service,
.milla-topic,
.milla-interest-area,
.milla-point,
.milla-route {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}

/* Tablet grande - 2 columnas */
@media (max-width: 1400px) {
    .milla-services,
    .milla-topics,
    .milla-interest-areas,
    .milla-points,
    .milla-routes {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* Tablet pequeño / Mobile grande - 1 columna */
@media (max-width: 900px) {
    .milla-services,
    .milla-topics,
    .milla-interest-areas,
    .milla-points,
    .milla-routes {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Responsive medio - ajustes para tablets */
@media (max-width: 1024px) {
    .milla-service-card,
    .milla-topic-card,
    .milla-point-card,
    .milla-route-card {
        height: 180px;
    }
    
    .milla-service-card-content,
    .milla-topic-card-content,
    .milla-point-card-content,
    .milla-route-card-content {
        padding: 16px;
    }
    
    .milla-service-card-title,
    .milla-topic-card-title,
    .milla-point-card-title,
    .milla-route-card-title {
    font-size: 16px;
    }
}

/* Responsive para tarjetas - SIEMPRE mantener imagen a la izquierda */
/* En pantallas pequeñas, reducimos el tamaño de la imagen pero NUNCA la ponemos arriba */
@media (max-width: 768px) {
    .milla-service-card,
    .milla-topic-card,
    .milla-point-card,
    .milla-route-card {
        height: 140px; /* Reducir altura en móviles */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .milla-service-card-image,
    .milla-topic-card-image,
    .milla-point-card-image,
    .milla-route-card-image {
        width: 35%; /* Imagen más pequeña en móviles */
        height: 140px;
        min-width: 90px;
        flex-shrink: 0;
    }
    
    .milla-service-card-content,
    .milla-topic-card-content,
    .milla-point-card-content,
    .milla-route-card-content {
        width: 65%;
        padding: 10px;
        min-width: 0;
    }
    
    .milla-service-card-title,
    .milla-topic-card-title,
    .milla-point-card-title,
    .milla-route-card-title {
        font-size: 13px; /* Texto más pequeño en móviles */
        -webkit-line-clamp: 3; /* Permitir 3 líneas en móvil */
    }
    
    .milla-service-card-actions,
    .milla-topic-card-actions,
    .milla-point-card-actions,
    .milla-route-card-actions {
        gap: 4px;
        margin-top: 8px;
        flex-wrap: wrap; /* Permitir que los botones se envuelvan si es necesario */
    }
    
    .milla-service-edit-btn,
    .milla-topic-edit-btn,
    .milla-point-edit-btn,
    .milla-route-edit-btn,
    .milla-service-delete-btn,
    .milla-topic-delete-btn,
    .milla-point-delete-btn,
    .milla-route-delete-btn,
    .milla-point-draft-btn,
    .milla-route-draft-btn,
    .milla-point-publish-btn,
    .milla-route-publish-btn {
        width: 28px;
        height: 28px;
    }
    
    .milla-service-edit-btn::before,
    .milla-topic-edit-btn::before,
    .milla-point-edit-btn::before,
    .milla-route-edit-btn::before,
    .milla-service-delete-btn::before,
    .milla-topic-delete-btn::before,
    .milla-point-delete-btn::before,
    .milla-route-delete-btn::before {
        width: 14px;
        height: 14px;
    }
    
    .milla-point-draft-btn i,
    .milla-route-draft-btn i,
    .milla-point-publish-btn i,
    .milla-route-publish-btn i {
        font-size: 14px !important;
    }
}

/* Responsive extra pequeño */
@media (max-width: 480px) {
    .milla-service-card,
    .milla-topic-card,
    .milla-point-card,
    .milla-route-card {
        height: 120px;
    }
    
    .milla-service-card-image,
    .milla-topic-card-image,
    .milla-point-card-image,
    .milla-route-card-image {
        width: 30%;
        height: 120px;
        min-width: 80px;
    }
    
    .milla-service-card-content,
    .milla-topic-card-content,
    .milla-point-card-content,
    .milla-route-card-content {
        width: 70%;
        padding: 8px;
    }
    
    .milla-service-card-title,
    .milla-topic-card-title,
    .milla-point-card-title,
    .milla-route-card-title {
        font-size: 12px;
    }
    
    .milla-service-edit-btn,
    .milla-topic-edit-btn,
    .milla-point-edit-btn,
    .milla-route-edit-btn,
    .milla-service-delete-btn,
    .milla-topic-delete-btn,
    .milla-point-delete-btn,
    .milla-route-delete-btn,
    .milla-point-draft-btn,
    .milla-route-draft-btn,
    .milla-point-publish-btn,
    .milla-route-publish-btn {
        width: 24px;
        height: 24px;
    }
    
    .milla-service-edit-btn::before,
    .milla-topic-edit-btn::before,
    .milla-point-edit-btn::before,
    .milla-route-edit-btn::before,
    .milla-service-delete-btn::before,
    .milla-topic-delete-btn::before,
    .milla-point-delete-btn::before,
    .milla-route-delete-btn::before {
        width: 12px;
        height: 12px;
    }
    
    .milla-point-draft-btn i,
    .milla-route-draft-btn i,
    .milla-point-publish-btn i,
    .milla-route-publish-btn i {
        font-size: 12px !important;
    }
}

.milla-service-header,
.milla-topic-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.milla-service-check,
.milla-topic-check {
    flex-shrink: 0;
}

.milla-service-title,
.milla-topic-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    color: var(--milla-formpage-color-primary-dark);
}

.milla-service-actions,
.milla-topic-actions,
.milla-point-actions,
.milla-route-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.milla-point-title,
.milla-route-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--milla-formpage-color-primary-dark);
    margin-bottom: 10px;
}

.milla-point-actions-admin,
.milla-route-actions-admin {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Estilos específicos para botones en vista admin - iconos negros */
.milla-view-admin .milla-point-edit-btn::before,
.milla-view-admin .milla-route-edit-btn::before {
    background: #333333 !important;
}

.milla-view-admin .milla-point-edit-btn:hover::before,
.milla-view-admin .milla-route-edit-btn:hover::before {
    background: #000000 !important;
}

.milla-view-admin .milla-point-delete-btn::before,
.milla-view-admin .milla-route-delete-btn::before {
    background: #333333 !important;
}

.milla-view-admin .milla-point-delete-btn:hover::before,
.milla-view-admin .milla-route-delete-btn:hover::before {
    background: #000000 !important;
}

.milla-view-admin .milla-point-draft-btn,
.milla-view-admin .milla-route-draft-btn {
    color: #333333 !important;
}

.milla-view-admin .milla-point-draft-btn:hover,
.milla-view-admin .milla-route-draft-btn:hover {
    color: #000000 !important;
}

.milla-view-admin .milla-point-publish-btn,
.milla-view-admin .milla-route-publish-btn {
    color: #333333 !important;
}

.milla-view-admin .milla-point-publish-btn:hover,
.milla-view-admin .milla-route-publish-btn:hover {
    color: #000000 !important;
}

.milla-service-btn,
.milla-topic-btn,
.milla-point-btn,
.milla-route-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 25px;
    background: white;
    color: var(--milla-formpage-color-primary-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

.milla-service-btn i,
.milla-topic-btn i,
.milla-point-btn i,
.milla-route-btn i {
    pointer-events: none;
    font-size: 18px;
}

.milla-service-btn span,
.milla-topic-btn span,
.milla-point-btn span,
.milla-route-btn span {
    pointer-events: none;
}

.milla-service-btn:hover,
.milla-topic-btn:hover,
.milla-point-btn:hover,
.milla-route-btn:hover {
    background: var(--milla-formpage-color-primary-light);
    border-color: var(--milla-formpage-color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(97, 124, 55, 0.2);
}

.milla-service-btn:focus,
.milla-topic-btn:focus,
.milla-point-btn:focus,
.milla-route-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.2);
}

/* Botones específicos */
.milla-service-view-btn,
.milla-topic-view-btn,
.milla-point-view-btn,
.milla-route-view-btn {
    display: none !important; /* Ocultar botones de View */
}

.milla-service-duplicate-btn,
.milla-topic-duplicate-btn,
.milla-point-duplicate-btn,
.milla-route-duplicate-btn {
    display: none !important; /* Ocultar botones de Duplicate */
}

.milla-service-edit-btn,
.milla-topic-edit-btn,
.milla-point-edit-btn,
.milla-route-edit-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.milla-service-edit-btn::before,
.milla-topic-edit-btn::before,
.milla-point-edit-btn::before,
.milla-route-edit-btn::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    -webkit-mask: url('/wp-content/plugins/milla/assets/media/milla-icon-edit.svg') no-repeat center center;
    mask: url('/wp-content/plugins/milla/assets/media/milla-icon-edit.svg') no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: all 0.3s ease;
}

.milla-service-edit-btn:hover,
.milla-topic-edit-btn:hover,
.milla-point-edit-btn:hover,
.milla-route-edit-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3) !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}



.milla-service-edit-btn i,
.milla-topic-edit-btn i,
.milla-point-edit-btn i,
.milla-route-edit-btn i,
.milla-service-edit-btn span,
.milla-topic-edit-btn span,
.milla-point-edit-btn span,
.milla-route-edit-btn span {
    display: none !important;
}


.milla-point-draft-btn,
.milla-route-draft-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milla-point-draft-btn:hover,
.milla-route-draft-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3) !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.milla-point-draft-btn span,
.milla-route-draft-btn span {
    display: none !important;
}

.milla-point-draft-btn i,
.milla-route-draft-btn i {
    font-size: 20px !important;
}

.milla-point-publish-btn,
.milla-route-publish-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.milla-point-publish-btn:hover,
.milla-route-publish-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3) !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.milla-point-publish-btn span,
.milla-route-publish-btn span {
    display: none !important;
}

.milla-point-publish-btn i,
.milla-route-publish-btn i {
    font-size: 20px !important;
}

.milla-service-delete-btn,
.milla-topic-delete-btn,
.milla-point-delete-btn,
.milla-route-delete-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.milla-service-delete-btn::before,
.milla-topic-delete-btn::before,
.milla-point-delete-btn::before,
.milla-route-delete-btn::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    -webkit-mask: url('/wp-content/plugins/milla/assets/media/milla-icon-delete.svg') no-repeat center center;
    mask: url('/wp-content/plugins/milla/assets/media/milla-icon-delete.svg') no-repeat center center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: all 0.3s ease;
}

.milla-service-delete-btn i,
.milla-topic-delete-btn i,
.milla-point-delete-btn i,
.milla-route-delete-btn i,
.milla-service-delete-btn span,
.milla-topic-delete-btn span,
.milla-point-delete-btn span,
.milla-route-delete-btn span {
    display: none !important;
}

.milla-service-delete-btn:hover,
.milla-topic-delete-btn:hover,
.milla-point-delete-btn:hover,
.milla-route-delete-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3) !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.milla-service-delete-btn:hover::before,
.milla-topic-delete-btn:hover::before,
.milla-point-delete-btn:hover::before,
.milla-route-delete-btn:hover::before {
    background: #d32f2f;
}

/* Menu More Styles */
.milla-menu-more {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 2px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 25px;
    padding: 10px;
    min-width: 250px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 9999 !important;
}

.milla-menu-more ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.milla-menu-more li {
    padding: 8px 15px;
    transition: all 0.3s ease;
}

.milla-menu-more li:hover {
    background-color: var(--milla-formpage-color-primary);
    border-radius: 25px;
}

.milla-menu-more a {
    color: var(--milla-formpage-color-primary-dark);
    text-decoration: none;
    font-size: 14px;
}

/* Navigator Styles */
.milla-navigator-previous,
.milla-navigator-next {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.milla-navigator-previous button,
.milla-navigator-next button {
    background: none;
    border: 2px solid var(--milla-formpage-color-primary-dark);
    border-radius: 25px;
    color: var(--milla-formpage-color-primary-dark);
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.milla-navigator-previous button:hover,
.milla-navigator-next button:hover {
    background-color: var(--milla-formpage-color-primary-dark);
    color: white;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .milla-tabs {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .milla-tab-links {
        width: 100% !important;
        text-align: center !important;
        font-size: 14px !important;
    }


    .milla-config {
        padding: 15px;
    }

    .milla-tabs-wrapper {
        padding: 15px;
    }
}

/* --- INTEGRACIÓN VISUAL DEL FORMULARIO DE EDICIÓN DE CAMPOS --- */
.milla-field-edit-form {
    background: #fff;
    border: 3px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    padding: 30px 25px;
    margin: 20px 0;
    box-shadow: none;
    font-family: inherit;
}

.milla-field-edit-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.milla-field-edit-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.milla-field-edit-row label {
    font-size: 16px;
    font-weight: bold;
    color: var(--milla-formpage-color-primary-dark);
    margin-bottom: 4px;
}

.milla-field-edit-row input[type="text"] {
    border: 3px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    padding: 12px 15px;
    font-size: 16px;
    background: #fff;
    color: var(--milla-formpage-color-primary-dark);
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
}

.milla-field-edit-row input[type="text"]:focus {
    border-color: var(--milla-formpage-color-primary-dark);
}

.milla-field-edit-options {
    margin-top: 10px;
}

.milla-field-edit-options label {
    font-size: 16px;
    font-weight: bold;
    color: var(--milla-formpage-color-primary-dark);
    margin-bottom: 8px;
    display: block;
}

.milla-edit-options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.milla-edit-option-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.milla-edit-option-item input[type="text"] {
    border: 1px solid var(--milla-formpage-color-secondary-dark);
    border-radius: 20px;
    padding: 12px 15px;
    font-size: 16px;
    background: #fff;
    color: var(--milla-formpage-color-primary-dark);
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
}

.milla-edit-option-item input[type="text"]:focus {
    border-color: var(--milla-formpage-color-primary-dark);
}

.milla-remove-edit-option {
    background: none;
    border: 2px solid var(--milla-formpage-color-primary-dark);
    border-radius: 25px;
    color: var(--milla-formpage-color-primary-dark);
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
}

.milla-remove-edit-option:hover {
    background: var(--milla-formpage-color-primary-dark);
    color: #fff;
}

.milla-add-edit-option {
    background: none;
    border: 2px solid var(--milla-formpage-color-primary-dark);
    border-radius: 25px;
    color: var(--milla-formpage-color-primary-dark);
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

.milla-add-edit-option:hover {
    background: var(--milla-formpage-color-primary-dark);
    color: #fff;
}

.milla-field-edit-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* Estilos específicos para field editor - no afectan al user editor */
.milla-field-edit-actions .milla-save-edit,
.milla-field-edit-actions .milla-cancel-edit {
    border-radius: 25px;
    font-size: 14px;
    padding: 8px 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid var(--milla-formpage-color-primary-dark);
}

.milla-field-edit-actions .milla-save-edit {
    background: var(--milla-formpage-color-primary-dark);
    color: #fff;
}

.milla-field-edit-actions .milla-save-edit:hover {
    background: var(--milla-formpage-color-primary-dark-alt);
    color: #fff;
}

.milla-field-edit-actions .milla-cancel-edit {
    background: #fff;
    color: var(--milla-formpage-color-primary-dark);
}

.milla-field-edit-actions .milla-cancel-edit:hover {
    background: var(--milla-formpage-color-secondary-dark-alt);
    color: var(--milla-formpage-color-primary-dark);
}

.service-view .milla-service {
    border: none !important;
}

.service-view .milla-service:hover {
    background-color: transparent !important;
}

.service-view .milla-btn,
.service-view .milla-btn-mini {
    background: #ffffff !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    border: 2px solid var(--milla-formpage-color-primary-dark) !important;
    border-radius: 25px !important;
    padding: 8px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    box-shadow: none !important;
}

.service-view .milla-btn:hover,
.service-view .milla-btn-mini:hover {
    background: var(--milla-formpage-color-primary-dark);
    color: #fff;
    border-color: var(--milla-formpage-color-primary-dark);
}

.milla-card-edit-form-item-info {
    flex-direction: row !important;
}

.milla-cpt-add-new {
    transition: all 0.3s ease;
}

.milla-cpt-add-new {
    transition: all 0.3s ease;
}





/* point list  */
.milla-point-list {
    margin-top: 20px;
}

/* Estilos antiguos de puntos y rutas movidos arriba con las tarjetas nuevas */

.milla-point .milla-table-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.milla-point .milla-table-item-image span {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.milla-point .milla-table-item-image span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.milla_point_item-inner {
    display: flex;
    width: 100%;
}

.milla_point_item-img {
    width: 100%;
    max-width: 180px;
    min-width: 120px;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    background: #eee;
}



.milla_point_item-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d2d2d;
    margin-bottom: 0;
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.milla_point_item-title a {
    color: inherit;
    text-decoration: none;
}

.milla_point_item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
}

.milla_point_item-action {
    color: #fff;
    background: #6c7ae0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-left: 4px;
}

.milla_point_item-actions {
    display: flex;
}

@media (max-width: 1424px) {
    .milla-points {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 924px) {
    .milla-points {
        grid-template-columns: repeat(1, 1fr);
    }
}




@media (max-width: 600px) {
    .milla_point_item-image {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .milla_point_item-content {
        padding: 12px 8px;
    }

    .milla_point_item-actions {
        padding: 8px;
        justify-content: flex-end;
    }
    
    /* Responsive para rutas */
    .milla_route_item-img {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .milla_route_item-content {
        padding: 12px 8px;
    }
}


.milla_point_item-inner,
.milla-display-inline-table,
.milla-width-40-percent,
.milla-point,
.milla-list-style-none {
    overflow: visible !important;
}

/* Overflow visible para rutas también */
.milla_route_item-inner,
.milla-route {
    overflow: visible !important;
}


.milla_point_item-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    justify-content: space-between;
}
.milla_point_item-content-wrapper a {
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    color: white !important;
    text-decoration: none !important;
}
.milla_point_item-content-wrapper a:hover {
    color: black !important;
}
.milla_point_item-content-wrapper i {
    font-size: 1.9rem !important;
    color: white !important;
}
.milla_point_item-content-wrapper i:hover {
    color: black !important;
}


.milla_point_item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.milla-milla_point-list {
    max-width: 80%;
}

/* Estilos para rutas - idénticos a puntos */

.milla_route_item-inner {
    display: flex;
    width: 100%;
}

.milla_route_item-img {
    width: 100%;
    max-width: 180px;
    min-width: 120px;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    background: #eee;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.milla_route_item-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    justify-content: space-between;
}

.milla_route_item-content-wrapper a {
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    color: white !important;
    text-decoration: none !important;
}

.milla_route_item-content-wrapper a:hover {
    color: black !important;
}

.milla_route_item-content-wrapper i {
    font-size: 1.9rem !important;
    color: white !important;
}

.milla_route_item-content-wrapper i:hover {
    color: black !important;
}

.milla_route_item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.milla-milla_route-list {
    max-width: 80%;
}

/* Border-radius solo en el lado izquierdo de la imagen, igual que el contenedor */
.milla_point_item-img {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.milla-form-mockup-item label,
.milla-separator-text {
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

.milla-image-preview p {
    color: #000 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* Estilos simples para botones de selección de imágenes */
.milla-image-upload-wrapper .milla-select-image-button,
.milla-audio-upload-wrapper .milla-select-audio-button,
.milla-video-upload-wrapper .milla-select-video-button {
    background: #6c757d !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.3s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.milla-image-upload-wrapper .milla-select-image-button:hover,
.milla-audio-upload-wrapper .milla-select-audio-button:hover,
.milla-video-upload-wrapper .milla-select-video-button:hover {
    background: #5a6268 !important;
}

.milla-image-upload-wrapper .milla-select-image-button:active,
.milla-audio-upload-wrapper .milla-select-audio-button:active,
.milla-video-upload-wrapper .milla-select-video-button:active {
    background: #545b62 !important;
}

.milla-image-upload-wrapper .milla-select-image-button:disabled,
.milla-audio-upload-wrapper .milla-select-audio-button:disabled,
.milla-video-upload-wrapper .milla-select-video-button:disabled {
    background: #adb5bd !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

/* Responsive para botones */
@media (max-width: 768px) {
    .milla-image-upload-wrapper .milla-select-image-button,
    .milla-audio-upload-wrapper .milla-select-audio-button,
    .milla-video-upload-wrapper .milla-select-video-button {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

/* Estilos mejorados para campos de subida de imágenes */
.milla-image-upload-wrapper, .milla-audio-upload-wrapper, .milla-video-upload-wrapper {
    background: #f8f9fa !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 15px !important;
    position: relative !important;
}

 .milla-upload-area {
    text-align: center !important;
    margin-bottom: 15px !important;
}

 .milla-upload-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Estilos mejorados para botones de selección */
.milla-image-upload-wrapper .milla-select-image-button,
.milla-audio-upload-wrapper .milla-select-audio-button {
    background: linear-gradient(135deg, var(--milla-formpage-color-primary-dark) 0%, var(--milla-formpage-color-primary-dark-alt) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
}



.milla-video-upload-wrapper .milla-select-video-button:hover {
    background: #5a6268 !important;
}

.milla-video-upload-wrapper .milla-select-video-button:active {
    background: #545b62 !important;
}

.milla-video-upload-wrapper .milla-select-video-button:disabled {
    background: #adb5bd !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

/* Estilos mejorados para la previsualización de imágenes */
.milla-image-preview {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

.milla-preview-item {
    background: white !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.milla-preview-item img {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
}

.milla-preview-item button {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 30px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

/* Estilos para el botón de subida */
.milla-upload-image-button {
    background: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}

.milla-upload-image-button:hover {
    background: #218838 !important;
    transform: translateY(-1px) !important;
}

/* Estilos para la barra de progreso */
.milla-upload-progress {
    background: #e9ecef !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 10px 0 !important;
    width: 90% !important;
}

.milla-progress-bar {
    background: linear-gradient(90deg, #0073aa, #005a87) !important;
    transition: width 0.3s ease !important;
    border-radius: 10px !important;
}

.milla-progress-text {
    text-align: center !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin: 5px 0 !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .milla-image-upload-wrapper {
        padding: 15px !important;
    }
    
    .milla-image-upload-wrapper .milla-select-image-button,
    .milla-audio-upload-wrapper .milla-select-audio-button,
    .milla-video-upload-wrapper .milla-select-video-button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .milla-image-preview {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 10px !important;
    }
    
    .milla-preview-item img {
        height: 120px !important;
    }
}

/* === IMAGEN ADMIN - DISEÑO MODERNO COMPLETO === */

/* Wrapper principal - limpio y moderno */
.milla-image-upload-wrapper[data-admin-image="true"] {
    background: white !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Área de subida - cuando NO hay imagen (limpia, sin decoración) */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-upload-area {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Botón seleccionar imagen - estilos de la app */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-select-image-button {
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.milla-image-upload-wrapper[data-admin-image="true"] .milla-select-image-button:hover {
    background: var(--milla-formpage-color-primary-dark-alt) !important;
}

.milla-image-upload-wrapper[data-admin-image="true"] .milla-select-image-button:focus {
    outline: none !important;
}

/* Preview container - cuando HAY imagen */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-image-preview {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 0 !important;
}

/* Item de preview - contenedor de imagen + info */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-preview-item {
    background: white !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 600px !important;
}

/* Contenedor de media */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-media-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Imagen - moderna y limpia */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-preview-item img,
.milla-image-upload-wrapper[data-admin-image="true"] .milla-media-content img {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
}

/* Info de la imagen */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-media-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.milla-image-upload-wrapper[data-admin-image="true"] .milla-media-info small {
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* Campo de título de la imagen */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-attachment-title {
    width: 100% !important;
    padding: 10px 16px !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    background: white !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    text-align: center !important;
}

.milla-image-upload-wrapper[data-admin-image="true"] .milla-attachment-title:focus {
    border-color: var(--milla-formpage-color-primary-dark) !important;
    outline: none !important;
}

/* Botón eliminar */
.milla-image-upload-wrapper[data-admin-image="true"] .milla-remove-single-image,
.milla-image-upload-wrapper[data-admin-image="true"] .milla-preview-item button {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-transform: none !important;
    width: auto !important;
    min-width: 120px !important;
    margin: 0 auto !important;
    display: block !important;
}

.milla-image-upload-wrapper[data-admin-image="true"] .milla-remove-single-image:hover,
.milla-image-upload-wrapper[data-admin-image="true"] .milla-preview-item button:hover {
    background: #c82333 !important;
}

.milla-image-upload-wrapper[data-admin-image="true"] .milla-remove-single-image:focus,
.milla-image-upload-wrapper[data-admin-image="true"] .milla-preview-item button:focus {
    outline: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .milla-image-upload-wrapper[data-admin-image="true"] .milla-upload-area {
        padding: 60px 20px !important;
    }
    
    .milla-image-upload-wrapper[data-admin-image="true"] .milla-preview-item {
        padding: 20px !important;
    }
    
    .milla-image-upload-wrapper[data-admin-image="true"] .milla-preview-item img,
    .milla-image-upload-wrapper[data-admin-image="true"] .milla-media-content img {
        max-width: 100% !important;
        max-height: 250px !important;
    }
}

/* Galería múltiple: imagen grande y botón debajo */
.milla-image-upload-wrapper.milla-multiple-upload .milla-image-preview {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    justify-items: center !important;
}

.milla-image-upload-wrapper.milla-multiple-upload .milla-preview-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: white !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.milla-image-upload-wrapper.milla-multiple-upload .milla-preview-item img {
    width: 100% !important;
    max-width: 300px !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}

.milla-image-upload-wrapper.milla-multiple-upload .milla-preview-item button {
    width: 150px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    display: block !important;
}

/* Galería múltiple de audios: audio arriba, nombre centrado, botón debajo */
.milla-audio-upload-wrapper.milla-multiple-upload .milla-audio-preview {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    justify-items: center !important;
    margin-top: 1rem !important;
}

.milla-audio-upload-wrapper.milla-multiple-upload .milla-preview-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: white !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.milla-audio-upload-wrapper.milla-multiple-upload .milla-preview-item audio {
    width: 100% !important;
    max-width: 300px !important;
    margin-bottom: 10px !important;
}

.milla-audio-upload-wrapper.milla-multiple-upload .milla-preview-item small {
    display: block !important;
    text-align: center !important;
    margin-bottom: 12px !important;
    color: #555 !important;
    font-size: 14px !important;
    word-break: break-all !important;
}

.milla-audio-upload-wrapper.milla-multiple-upload .milla-preview-item button {
    width: 150px !important;
    margin: 0 auto !important;
    margin-top: 0 !important;
    display: block !important;
}

/* Galería múltiple de videos: video arriba, botón debajo */
.milla-video-upload-wrapper.milla-multiple-upload .milla-video-preview {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    justify-items: center !important;
    margin-top: 1rem !important;
}

.milla-video-upload-wrapper.milla-multiple-upload .milla-preview-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: white !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.milla-video-upload-wrapper.milla-multiple-upload .milla-preview-item video {
    width: 100% !important;
    max-width: 300px !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
}

.milla-video-upload-wrapper.milla-multiple-upload .milla-preview-item button {
    width: 150px !important;
    margin: 0 auto !important;
    margin-top: 0 !important;
    display: block !important;
}

/* Botones de eliminar (imagen, audio, video) - estilo destacado y uniforme */
.milla-remove-single-image,
.milla-remove-single-audio,
.milla-remove-single-video,
button.milla-remove-single-image,
button.milla-remove-single-audio,
button.milla-remove-single-video {
    background: #dc3545 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 10px 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 150px !important;
    margin: 0 auto !important;
    display: block !important;
    box-shadow: 0 2px 8px rgba(220,53,69,0.08) !important;
    transition: background 0.2s !important;
    letter-spacing: 0.5px !important;
}

.milla-remove-single-image:hover,
.milla-remove-single-audio:hover,
.milla-remove-single-video:hover,
button.milla-remove-single-image:hover,
button.milla-remove-single-audio:hover,
button.milla-remove-single-video:hover {
    background: #b52a37 !important;
}
.milla-input-wrapper label,
.milla-input-wrapper div.milla-vertical-align-middle {
    padding: 0 !important;
  }

/* --- FIELD CREATOR: CAMPOS CREADOS (MEJORADO) --- */
.milla-field-creator-fields {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.milla-created-field {
  border: 1px solid var(--milla-formpage-color-secondary-dark, #c6cab2);
  border-radius: 14px;
  padding: 18px 18px 14px 18px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(66, 78, 0, 0.06);
  transition: box-shadow 0.2s;
  position: relative;
}
.milla-created-field:hover {
  box-shadow: 0 4px 18px rgba(66, 78, 0, 0.13);
}

.milla-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.milla-field-label {
  color: var(--milla-formpage-color-primary-dark, #424e00);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.milla-field-placeholder {
  color: #b0b0b0;
  font-size: 0.98rem;
  font-style: italic;
  margin-left: 12px;
}

.milla-field-header button {
  background: #f7f7f7 !important;
  border: 1px solid var(--milla-formpage-color-secondary-dark, #c6cab2) !important;
  border-radius: 8px !important;
  color: var(--milla-formpage-color-primary-dark, #424e00) !important;
  padding: 6px 14px !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(66, 78, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 4px;
}
.milla-field-header button:hover {
  background: var(--milla-formpage-color-primary-dark, #424e00) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(66, 78, 0, 0.10);
}

.milla-field-header .milla-icon {
  font-size: 18px !important;
  vertical-align: middle;
  margin: 0 2px;
}

.milla-field-options {
  margin-top: 10px;
  padding: 10px 0 0 0;
  background: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Estilos consolidados en la sección de field creator más abajo */

/* Responsive improvements */
@media (max-width: 600px) {
  .milla-created-field {
    padding: 12px 6px 10px 6px;
  }
  .milla-field-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .milla-field-label {
    font-size: 1rem;
  }
  .milla-field-header button {
    font-size: 14px !important;
    padding: 5px 10px !important;
  }
}

/* --- FIELD CREATOR: FORMULARIO DE EDICIÓN (MEJORADO) --- */
.milla-field-edit-form {
  background: #fff;
  border: 2px solid var(--milla-formpage-color-secondary-dark);
  border-radius: 20px;
  padding: 24px;
  margin-top: 0;
  box-shadow: 0 2px 8px rgba(66, 78, 0, 0.08);
}

.milla-field-edit-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.milla-field-edit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.milla-field-edit-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--milla-formpage-color-primary-dark);
  margin-bottom: 0;
  display: block;
}

.milla-field-edit-row input,
.milla-field-edit-row .milla-edit-label,
.milla-field-edit-row .milla-edit-placeholder,
.milla-field-edit-row .milla-edit-value,
input.milla-edit-label,
input.milla-edit-placeholder,
input.milla-edit-value {
  width: 100% !important;
  padding: 10px 16px !important;
  border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  color: #495057 !important;
  background: white !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  outline: none !important;
}

.milla-field-edit-row input:focus,
.milla-field-edit-row .milla-edit-label:focus,
.milla-field-edit-row .milla-edit-placeholder:focus,
.milla-field-edit-row .milla-edit-value:focus,
input.milla-edit-label:focus,
input.milla-edit-placeholder:focus,
input.milla-edit-value:focus {
  outline: none !important;
  border-color: var(--milla-formpage-color-primary-dark) !important;
  box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.1) !important;
}

.milla-field-edit-options {
  margin-top: 10px;
}

.milla-field-edit-options label {
  font-size: 14px;
  font-weight: 600;
  color: var(--milla-formpage-color-primary-dark);
  margin-bottom: 8px;
  display: block;
}

.milla-edit-options-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.milla-edit-option-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 2px solid var(--milla-formpage-color-secondary-dark);
  border-radius: 50px;
}

.milla-edit-option-item input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 8px;
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.milla-edit-option-item input:focus {
  outline: none;
  box-shadow: none;
}

.milla-remove-edit-option {
  background: #dc3545 !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.milla-remove-edit-option:hover {
  background: #b52a37 !important;
}

.milla-add-edit-option {
  background: var(--milla-formpage-color-primary-dark) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  align-self: flex-start;
}

.milla-add-edit-option:hover {
  background: var(--milla-formpage-color-primary-dark-alt) !important;
  transform: translateY(-1px);
}

.milla-field-edit-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--milla-formpage-color-secondary-dark);
}

.milla-field-edit-actions .milla-save-edit,
button.milla-save-edit {
  background: var(--milla-formpage-color-primary-dark) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: auto !important;
  line-height: normal !important;
}

.milla-field-edit-actions .milla-save-edit:hover,
button.milla-save-edit:hover {
  background: var(--milla-formpage-color-primary-dark-alt) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(97, 124, 55, 0.2) !important;
}

.milla-field-edit-actions .milla-cancel-edit,
button.milla-cancel-edit {
  background: transparent !important;
  color: var(--milla-formpage-color-primary-dark) !important;
  border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: auto !important;
  line-height: normal !important;
}

.milla-field-edit-actions .milla-cancel-edit:hover,
button.milla-cancel-edit:hover {
  background: var(--milla-formpage-color-secondary-dark) !important;
  color: white !important;
  border-color: var(--milla-formpage-color-secondary-dark) !important;
}

/* --- FIELD CREATOR: CONFIGURACIÓN BÁSICA (MEJORADO) --- */

.milla-field-creator-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.milla-field-basic-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.milla-field-creator-container .milla-field-type-selector,
.milla-field-creator-container .milla-field-label,
.milla-field-creator-container .milla-field-placeholder,
.milla-field-creator-container .milla-field-value {
  width: 100% !important;
  padding: 10px 16px !important;
  border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  color:var(--milla-formpage-color-primary-dark) !important;
  background: white !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  outline: none !important;
}

.milla-field-creator-container .milla-field-type-selector:focus,
.milla-field-creator-container .milla-field-label:focus,
.milla-field-creator-container .milla-field-placeholder:focus,
.milla-field-creator-container .milla-field-value:focus {
  border-color: var(--milla-formpage-color-primary-dark) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.1) !important;
}

.milla-field-options-settings {
  margin-top: 16px;
}

.milla-options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.milla-option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--milla-formpage-color-secondary-dark);
  border-radius: 50px;
}

.milla-option-item input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 8px;
  font-size: 14px;
  color: var(--milla-formpage-color-primary-dark);
  font-weight: 500;
  outline: none;
}

.milla-remove-option {
  background: #dc3545 !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

.milla-remove-option:hover {
  background: #b52a37 !important;
}

.milla-add-option {
  background: var(--milla-formpage-color-primary-dark) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  align-self: flex-start;
}

.milla-add-option:hover {
  background: var(--milla-formpage-color-primary-dark-alt) !important;
  transform: translateY(-1px);
}

.milla-add-field {
  background: var(--milla-formpage-color-primary-dark) !important;
  color: white !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  margin-top: 20px;
  align-self: flex-start;
}

.milla-add-field:hover {
  background: var(--milla-formpage-color-primary-dark-alt) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(97, 124, 55, 0.2);
}

/* --- FIELD CREATOR: CAMPOS CREADOS (ACTUALIZADO) --- */
.milla-field-creator-fields {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.milla-created-field {
  border: 2px solid var(--milla-formpage-color-secondary-dark);
  border-radius: 20px;
  padding: 20px;
  background: white;
  box-shadow: 0 2px 8px rgba(66, 78, 0, 0.06);
  transition: all 0.2s ease;
  position: relative;
}

.milla-created-field:hover {
  box-shadow: 0 4px 16px rgba(66, 78, 0, 0.12);
  border-color: var(--milla-formpage-color-primary-dark);
}

.milla-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.milla-field-drag {
  color: var(--milla-formpage-color-primary-dark);
  font-size: 18px;
  font-weight: 600;
  cursor: move;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.milla-field-drag:hover {
  background: rgba(97, 124, 55, 0.1);
}

.milla-field-label {
  color: var(--milla-formpage-color-primary-dark);
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  margin: 0 8px;
}

.milla-field-placeholder {
  color: #666;
  font-size: 14px;
  font-style: italic;
  margin-left: 8px;
}

.milla-field-value-display {
  color: #495057;
  font-size: 14px;
  font-weight: 500;
  background: #f8f9fa;
  padding: 4px 8px;
  border-radius: 12px;
  margin-left: 8px;
}

.milla-field-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.milla-field-actions button {
  background: transparent !important;
  border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
  border-radius: 50% !important;
  color: var(--milla-formpage-color-primary-dark) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.milla-field-actions button:hover {
  background: var(--milla-formpage-color-primary-dark) !important;
  border-color: var(--milla-formpage-color-primary-dark) !important;
  color: white !important;
  transform: translateY(-1px);
}

.milla-field-actions .milla-remove-field:hover {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: white !important;
}

.milla-field-options {
  margin-top: 12px;
  padding: 12px 0 0 0;
  border-top: 1px solid var(--milla-formpage-color-secondary-dark);
}

.milla-option {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 6px;;
  border: 1px solid var(--milla-formpage-color-secondary-dark);
  border-radius: 50px;
  font-size: 14px;
  gap: 8px;
}

.milla-option:last-child {
  margin-bottom: 0;
}

.milla-option-value {
  color: #495057;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

/* Separadores */

.milla-created-field[data-field-type="separator"] .milla-field-label {
  color: var(--milla-formpage-color-primary-dark);
  font-weight: 700;
}

.milla-created-field[data-field-type="separator"] hr {
  border: none;
  border-top: 3px solid var(--milla-formpage-color-primary-dark);
  margin: 12px 0 0 0;
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  .milla-field-creator-container {
    padding: 16px;
    margin: 16px 0;
  }
  
  .milla-field-edit-form {
    padding: 16px;
  }
  
  .milla-field-edit-content {
    gap: 16px;
  }
  
  .milla-field-edit-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .milla-field-edit-actions .milla-save-edit,
  .milla-field-edit-actions .milla-cancel-edit,
  button.milla-save-edit,
  button.milla-cancel-edit {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  .milla-field-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .milla-field-actions {
    align-self: flex-end;
  }
  
  .milla-created-field {
    padding: 16px;
  }
}

/* Colores de fondo para puntos según su tipo */

.milla-point-bg-color {

background-color: var(--milla-formpage-color-primary-dark);
}

.milla-point-bg-color-service {
    background-color: var(--milla-formpage-color-primary-dark-alt);
}

.milla-point-bg-color-topic {
    background-color: var(--milla-formpage-color-secondary-light);
}

/* Colores de fondo para rutas */
.milla-route-bg-color {
    background-color: var(--milla-formpage-color-secondary-light);
}

/* Estilos específicos para el menú desplegable de puntos */
.milla-menu-more {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
}

.milla-menu-more ul {
    margin: 0 !important;
    padding: 0 !important;
}

.milla-menu-more li {
    margin: 0 !important;
    padding: 0 !important;
}

.milla-menu-more li a {
    display: block !important;
    padding: 12px 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    border-radius: 4px !important;
    margin: 2px 8px !important;
}

.milla-menu-more li a:hover {
    background-color: #e0e0e0 !important;
    color: #000 !important;
}

.milla-menu-more .milla-display-table {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.milla-menu-more .milla-display-inline-table {
    display: flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

.milla-menu-more .milla-width-70-percent {
    width: 70% !important;
    justify-content: flex-start !important;
}

.milla-menu-more .milla-width-20-percent {
    width: 20% !important;
    justify-content: flex-end !important;
}

.milla-menu-more p {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.milla-menu-more i {
    color: #666 !important;
    font-size: 20px !important;
    margin-left: 10px !important;
}

.milla-menu-more li a:hover i {
    color: #333 !important;
}


/* Botones de filtro de puntos (service/topic) */
.milla-cpt-filter-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.milla-cpt-filter-buttons .milla-btn {
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 24px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  color: #fff;
  box-shadow: 0 2px 8px rgba(66, 78, 0, 0.08);
}
.milla-cpt-filter-buttons .milla-filter-service {
  background: var(--milla-formpage-color-primary-dark-alt); /* Igual que .milla-point-bg-color-service */
  color: #fff;
}
.milla-cpt-filter-buttons .milla-filter-service:hover,
.milla-cpt-filter-buttons .milla-filter-service:focus {
  background: #4e6a2a;
  color: #fff;
}
.milla-cpt-filter-buttons .milla-filter-topic {
  background: var(--milla-formpage-color-secondary-light); /* Igual que .milla-point-bg-color-topic */
  color: #fff;
}
.milla-cpt-filter-buttons .milla-filter-topic:hover,
.milla-cpt-filter-buttons .milla-filter-topic:focus {
  background: #404a6a;
  color: #fff;
}
/* Ocultar botón "Mostrar todos" */
.milla-filter-all {
  display: none !important;
}

/* Toolbar de filtros y búsqueda estilo píldora */
.milla-cpt-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  width: 100%;
}

.milla-cpt-toolbar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
}

.milla-cpt-toolbar-filters {
  display: flex;
  gap: 12px;
  align-items: center;
}

.milla-cpt-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  min-width: 280px;
  max-width: 400px;
  flex: 0 1 auto;
  background: #fff;
  border: 2px solid var(--milla-formpage-color-secondary-dark);
  border-radius: 25px;
  padding: 8px 16px 8px 40px;
  height: 42px;
  box-sizing: border-box;
}

.milla-btn {
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  padding: 8px 32px;
  border: 2px solid var(--milla-formpage-color-secondary-dark);
  cursor: pointer;
  background: #fff;
  color: var(--milla-formpage-color-primary-dark);
  transition: background 0.2s, color 0.2s, border 0.2s;
  outline: none;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-sizing: border-box;
}

.milla-btn:hover {
  background: var(--milla-formpage-color-primary-dark) !important;
  color: white !important;
  border-color: var(--milla-formpage-color-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(97, 124, 55, 0.3) !important;
}

/* Botón secundario - UNIFICADO con el botón principal para consistencia total */
.milla-btn-secondary {
  border-radius: 50px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 32px !important;
  border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
  cursor: pointer !important;
  background: #fff !important;
  color: var(--milla-formpage-color-primary-dark) !important;
  transition: background 0.2s, color 0.2s, border 0.2s !important;
  outline: none !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.milla-btn-secondary:hover {
  background: var(--milla-formpage-color-primary-dark) !important;
  color: white !important;
  border-color: var(--milla-formpage-color-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(97, 124, 55, 0.3) !important;
}

.milla-filter-topic.active {
  background: var(--milla-formpage-color-secondary-light) !important;
  color: #fff !important;
  border: 2px solid var(--milla-formpage-color-secondary-light) !important;
}
.milla-filter-service.active {
  background: var(--milla-formpage-color-primary-dark-alt) !important;
  color: #fff !important;
  border: 2px solid var(--milla-formpage-color-primary-dark-alt) !important;
}
.milla-filter-topic:not(.active),
.milla-filter-service:not(.active) {
  background: #fff;
  color: var(--milla-formpage-color-primary-dark);
  border: 2px solid var(--milla-formpage-color-primary-dark-alt);
  opacity: 0.6;
}
.milla-filter-topic:not(.active):hover,
.milla-filter-service:not(.active):hover {
  opacity: 1;
}

.milla-cpt-search-input {
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 16px;
  width: 100%;
  background: transparent;
  color: var(--milla-formpage-color-primary-dark);
  outline: none;
  transition: none;
  font-weight: 600;
}

.milla-cpt-search-wrapper:focus-within {
  border-color: var(--milla-formpage-color-primary-dark);
  box-shadow: 0 0 0 3px rgba(66, 78, 0, 0.1);
}

.milla-cpt-search-icon {
  position: absolute;
  left: 14px;
  color: var(--milla-formpage-color-primary-dark-alt);
  font-size: 22px;
  pointer-events: none;
}

.milla-cpt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: 24px;
}

.milla-btn-outline {
  background: #fff;
  color: var(--milla-formpage-color-primary-dark);
  border: 2px solid var(--milla-formpage-color-primary-dark);
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 32px;
  transition: background 0.2s, color 0.2s;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.milla-btn-outline:hover {
  background: var(--milla-formpage-color-primary-dark);
  color: #fff;
}
.milla-filter-topic:hover{
    background: var(--milla-formpage-color-secondary-light) !important;
    color: #fff;
}
.milla-filter-service:hover{
    background: var(--milla-formpage-color-primary-dark-alt);
    color: #fff;
}

/* Switch de visualización */
.milla-view-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  box-sizing: border-box;
}

.milla-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--milla-formpage-color-secondary-dark);
  border-radius: 50%;
  background: #fff;
  color: var(--milla-formpage-color-primary-dark);
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
  padding: 0;
}

.milla-view-btn:hover {
  background: rgba(66, 78, 0, 0.05);
  border-color: var(--milla-formpage-color-primary-dark);
}

.milla-view-btn.active {
  background: var(--milla-formpage-color-primary-dark);
  color: white;
  border-color: var(--milla-formpage-color-primary-dark);
}

.milla-view-btn i {
  font-size: 18px;
  pointer-events: none;
}

.milla-view-separator {
  color: var(--milla-formpage-color-secondary-dark);
  font-size: 16px;
  font-weight: 300;
  user-select: none;
}

/* Responsive del toolbar */
@media (max-width: 1024px) {
  .milla-cpt-toolbar {
    flex-wrap: wrap;
  }
  
  .milla-cpt-toolbar-left {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  
  .milla-cpt-search-wrapper {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 12px;
  }
  
  .milla-cpt-toolbar-right {
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .milla-cpt-toolbar-left {
    gap: 12px;
  }
  
  .milla-cpt-toolbar-filters {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  
  .milla-cpt-toolbar-right {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .milla-btn {
    font-size: 14px;
    padding: 8px 20px;
  }
  
  .milla-view-switch {
    gap: 6px;
  }
  
  .milla-view-btn {
    width: 32px;
    height: 32px;
  }
  
  .milla-view-btn i {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .milla-cpt-toolbar-filters {
    flex-direction: column;
    width: 100%;
  }
  
  .milla-cpt-toolbar-filters .milla-btn {
    width: 100%;
    justify-content: center;
  }
  
  .milla-cpt-toolbar-right a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  .milla-btn-secondary {
    width: 100% !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
  }
}

/* Definiciones duplicadas eliminadas - Consolidadas en línea 858 con border-radius: 50px */

.milla-dynamic-fields-container{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.milla-dynamic-fields-container .milla-input-field{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.milla-dynamic-fields-container .milla-input-field label{
    width: 40% !important;
}

.milla-dynamic-fields-container .milla-input-field label.milla-checkbox-label{
    width: 8% !important;
}


.milla-dynamic-fields-container .select2{
    width: 59% !important;
}
.milla-dynamic-fields-container .milla-input-field textarea{
    min-width: 58% !important;
    width: 58% !important;
}

.milla-dynamic-fields-container .milla-input-field input{
    min-width: 58% !important;
    width: 58% !important;
}

/* Estilos para grupos de media arrastrables - igual que field creator */
.milla-media-groups-container {
  margin: 20px 0;
  padding: 15px;

}

/* ESTILOS CONFLICTIVOS ELIMINADOS - REEMPLAZADOS POR LOS SIMPLIFICADOS ARRIBA */

/* Responsive */
@media (max-width: 768px) {
  .milla-media-groups-container {
    padding: 10px;
  }
  
  .milla-grupo-media-padre {
    margin-bottom: 8px;
  }
  
  .milla-drag-handle {
    padding: 8px 12px;
    color: var(--milla-formpage-color-primary-dark, #424e00) !important;
  }
  
  .milla-drag-text {
    font-size: 13px;
  }
  
  .milla-grupo-media-campos {
    padding: 12px;
  }
}

/* Estilos básicos para ordenamiento de archivos */
.milla-preview-item {
  cursor: move;
  transition: all 0.2s ease;
}

.milla-preview-item.milla-arrastrando {
  opacity: 0.7;
  transform: rotate(1deg);
  z-index: 1000;
}

/* Placeholder durante el arrastre */
.ui-sortable-placeholder {
  background: #f0f8ff;
  border: 2px dashed #0073aa;
  border-radius: 4px;
  height: 50px;
  margin: 5px 0;
  opacity: 0.5;
}

/* --- MEDIA GROUPS ORDERABLE FIELDS (ESTILO SIMPLIFICADO) --- */
.milla-media-groups-container.ui-sortable {
  margin-top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.milla-grupo-media-padre.milla-media-arrastrable {
  border: 2px solid var(--milla-formpage-color-secondary-dark, #c6cab2) !important;
  border-radius: 20px !important;
  padding: 20px !important;
  background: white !important;
  position: relative !important;
  cursor: default !important;
}

.milla-grupo-media-padre.milla-media-arrastrable.ui-sortable-helper {
  transform: rotate(0deg) !important;
  z-index: 1000 !important;
}

.milla-grupo-media-padre.milla-media-arrastrable.ui-sortable-placeholder {
  border: 2px dashed var(--milla-formpage-color-secondary-dark, #c6cab2) !important;
  background: transparent !important;
  opacity: 0.6 !important;
  border-radius: 14px !important;
  height: 80px !important;
  margin: 0 !important;
}


/* Contenedor de campos del grupo */
.milla-grupo-media-campos {
  margin-top: 10px !important;
  padding: 10px 0 0 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* Responsive */
@media (max-width: 600px) {
  .milla-grupo-media-padre.milla-media-arrastrable {
    padding: 12px 6px 10px 6px !important;
  }

}

/* Estilos para botones de selección */

/* Password toggle functionality */
.milla-password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.milla-password-input-wrapper input[type="password"],
.milla-password-input-wrapper input[type="text"] {
    flex: 1;
    padding-right: 40px;
}

.milla-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #666;
    transition: color 0.3s ease;
}

.milla-password-toggle:hover {
    color: #333;
}

.milla-password-toggle i {
    font-size: 18px;
}

/* Responsive para password toggle */
@media (max-width: 768px) {
    .milla-password-toggle {
        padding: 6px;
    }
    
    .milla-password-toggle i {
        font-size: 16px;
    }
}

/* ============================================
   ESTILOS MODERNOS PARA POPUP DE EDICIÓN
   ============================================ */

.point-edit,
.point-new {
    max-width: 100%;
    background: #ffffff;
    border-radius: 0;
    padding: 0 !important;
}

/* Header del popup - Puntos, Rutas, Servicios, Temas e Interest Areas */
.point-edit .milla-tab-content-title,
.point-new .milla-tab-content-title,
.route-edit .milla-tab-content-title,
.route-new .milla-tab-content-title,
.service-edit .milla-tab-content-title,
.service-new .milla-tab-content-title,
.topic-edit .milla-tab-content-title,
.topic-new .milla-tab-content-title,
.interest-area-edit .milla-tab-content-title,
.interest-area-new .milla-tab-content-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    margin: 0 0 8px 0 !important;
    text-align: left !important;
}

.point-edit .milla-tab-content-description,
.point-new .milla-tab-content-description,
.route-edit .milla-tab-content-description,
.route-new .milla-tab-content-description,
.service-edit .milla-tab-content-description,
.service-new .milla-tab-content-description,
.topic-edit .milla-tab-content-description,
.topic-new .milla-tab-content-description,
.interest-area-edit .milla-tab-content-description,
.interest-area-new .milla-tab-content-description {
    font-size: 14px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
    opacity: 0.7 !important;
}

.point-edit .milla-hr,
.point-new .milla-hr,
.route-edit .milla-hr,
.route-new .milla-hr,
.service-edit .milla-hr,
.service-new .milla-hr,
.topic-edit .milla-hr,
.topic-new .milla-hr,
.interest-area-edit .milla-hr,
.interest-area-new .milla-hr {
    border: none !important;
    border-top: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    margin: 0 0 24px 0 !important;
}

/* Labels en formularios de servicios, temas e interest areas */
.service-edit label.milla-font-size-16,
.service-new label.milla-font-size-16,
.topic-edit label.milla-font-size-16,
.topic-new label.milla-font-size-16,
.interest-area-edit label.milla-font-size-16,
.interest-area-new label.milla-font-size-16 {
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Bordes entre campos en formularios de servicios y temas (igual que puntos y rutas) */
.service-edit .milla-form-mockup,
.service-new .milla-form-mockup,
.topic-edit .milla-form-mockup,
.topic-new .milla-form-mockup {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #f8f9fa;
}

.service-edit .milla-form-mockup-item,
.service-new .milla-form-mockup-item,
.topic-edit .milla-form-mockup-item,
.topic-new .milla-form-mockup-item {
    background: white;
    border-bottom: 1px solid var(--milla-formpage-color-secondary-dark);
    margin-bottom: 0 !important;
}

.service-edit .milla-input-wrapper,
.service-new .milla-input-wrapper,
.topic-edit .milla-input-wrapper,
.topic-new .milla-input-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.service-edit .milla-input-wrapper .milla-width-40-percent,
.service-new .milla-input-wrapper .milla-width-40-percent,
.topic-edit .milla-input-wrapper .milla-width-40-percent,
.topic-new .milla-input-wrapper .milla-width-40-percent {
    background: #ffffff;
    border-right: 1px solid var(--milla-formpage-color-secondary-dark);
    display: flex;
    align-items: center;
    padding: 0 !important;
    width: 40% !important;
}

.service-edit .milla-input-wrapper .milla-width-40-percent .milla-p-10,
.service-new .milla-input-wrapper .milla-width-40-percent .milla-p-10,
.topic-edit .milla-input-wrapper .milla-width-40-percent .milla-p-10,
.topic-new .milla-input-wrapper .milla-width-40-percent .milla-p-10 {
    width: 100%;
    padding: 16px 20px !important;
}

.service-edit .milla-input-wrapper .milla-width-60-percent,
.service-new .milla-input-wrapper .milla-width-60-percent,
.topic-edit .milla-input-wrapper .milla-width-60-percent,
.topic-new .milla-input-wrapper .milla-width-60-percent {
    display: flex;
    align-items: center;
    padding: 0 !important;
    width: 60% !important;
}

.service-edit .milla-input-wrapper .milla-width-60-percent .milla-p-10,
.service-new .milla-input-wrapper .milla-width-60-percent .milla-p-10,
.topic-edit .milla-input-wrapper .milla-width-60-percent .milla-p-10,
.topic-new .milla-input-wrapper .milla-width-60-percent .milla-p-10 {
    width: 100%;
    padding: 16px 20px !important;
}

.service-edit .milla-form-mockup-item label.milla-font-size-16,
.service-new .milla-form-mockup-item label.milla-font-size-16,
.topic-edit .milla-form-mockup-item label.milla-font-size-16,
.topic-new .milla-form-mockup-item label.milla-font-size-16 {
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* Formulario principal */
.milla-form-mockup {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #f8f9fa;
}

/* Items del formulario */
.milla-form-mockup-item {
    background: white;
    border-bottom: 1px solid var(--milla-formpage-color-secondary-dark);
    margin-bottom: 0 !important;
}

/* Wrapper de inputs */
.milla-input-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Columna de labels (40%) */
.milla-input-wrapper .milla-width-40-percent {
    background: #ffffff;
    border-right: 1px solid var(--milla-formpage-color-secondary-dark);
    display: flex;
    align-items: center;
    padding: 0 !important;
    width: 40% !important;
}

.milla-input-wrapper .milla-width-40-percent .milla-p-10 {
    width: 100%;
    padding: 16px 20px !important;
}

/* Columna de inputs (60%) */
.milla-input-wrapper .milla-width-60-percent {
    display: flex;
    align-items: center;
    padding: 0 !important;
    width: 70% !important;
}

.milla-input-wrapper .milla-width-60-percent .milla-p-10 {
    width: 100%;
    padding: 16px 20px !important;
}

/* Labels modernos */
.milla-form-mockup-item label.milla-font-size-16 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    margin: 0 !important;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Toggle icons en labels */
.milla-toggle i.material-icons-outlined {
    color: var(--milla-formpage-color-primary-dark);
    font-size: 18px !important;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.milla-toggle:hover i.material-icons-outlined {
    transform: rotate(45deg);
}

/* Inputs mejorados */
.milla-input-field input.milla-field,
.milla-input-field textarea.milla-field,
.milla-input-field select.milla-field {
    width: 100% !important;
    padding: 10px 16px !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    background: white !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.milla-input-field input.milla-field:focus,
.milla-input-field textarea.milla-field:focus,
.milla-input-field select.milla-field:focus {
    border-color: var(--milla-formpage-color-primary-dark) !important;
    outline: none !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.1) !important;
}

/* Textareas */
.milla-input-field textarea.milla-field {
    min-height: 100px;
    resize: vertical;
    border-radius: 20px !important; /* Menos redondeado para textareas */
}

/* Select2 styling */
.select2-container--default .select2-selection--single {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 16px !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--milla-formpage-color-primary-dark) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1 !important;
    padding: 0 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 10px !important;
}

/* Opciones del dropdown */
.select2-container--default .select2-results__option {
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
}



/* Select2 multiple */
.select2-container--default .select2-selection--multiple {
    min-height: 48px !important;
    padding: 8px 12px !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    background: white !important;
    box-sizing: border-box !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--milla-formpage-color-primary-dark) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(97, 124, 55, 0.1) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--milla-formpage-color-primary-dark) !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white !important;
    margin-right: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 4px 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    min-height: 28px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: var(--milla-formpage-color-primary-dark) !important;
    margin-right: 8px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    color: #dc3545 !important;
}

/* Switch mejorado */
.milla-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 24px;
}

.milla-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.milla-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 32px;
}

.milla-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    top: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .milla-slider {
    background-color: var(--milla-formpage-color-primary-dark);
}

input:checked + .milla-slider:before {
    left: 31px;
}

/* Botón de submit */
.milla-text-align-right {
    padding: 24px;
    background: white;
    text-align: right;
    margin-top: 0 !important;
}

/* Estilos de .milla-text-align-right .milla-btn consolidados con los estilos principales */

/* Media groups container */
.milla-media-groups-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.milla-grupo-media-padre {
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 20px !important;
    background: white !important;
    margin-bottom: 16px !important;
}

/* Grupos de media con drag handle */
.milla-grupo-media-padre .milla-drag-handle {
    padding: 8px 12px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.milla-grupo-media-padre .milla-field-drag {
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.milla-grupo-media-padre .milla-group-controls {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

.milla-grupo-media-padre .milla-group-move-up,
.milla-grupo-media-padre .milla-group-move-down {
    background: white !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    padding: 6px 12px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.milla-grupo-media-padre .milla-group-move-up:hover,
.milla-grupo-media-padre .milla-group-move-down:hover {
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
}

/* Labels dentro de grupos de media */
.milla-grupo-media-padre label.milla-font-size-16 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
}


/* Botones secundarios */
.button.milla-select-image-button,
.button.milla-select-audio-button,
.button.milla-select-video-button,
.milla-geocode-button,
.milla-load-coordinates-button,
.milla-clear-map-button {
    background: white !important;
    border: 2px solid var(--milla-formpage-color-secondary-dark) !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.button.milla-select-image-button:hover,
.button.milla-select-audio-button:hover,
.button.milla-select-video-button:hover,
.milla-geocode-button:hover,
.milla-load-coordinates-button:hover,
.milla-clear-map-button:hover {
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
}

/* Campos ocultos con display-none */
.milla-display-none {
    display: none !important;
}

/* Campos con padding izquierdo (subcampos) */
.milla-pl-30 {
    padding-left: 30px !important;
}

/* Toggle content */
.milla-toggle-content {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--milla-formpage-color-secondary-dark);
}

.milla-toggle-content small {
    color: #6c757d;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400 !important;
}

/* Responsive para formularios */
@media (max-width: 1024px) {
    .milla-input-wrapper .milla-width-40-percent,
    .milla-input-wrapper .milla-width-60-percent {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--milla-formpage-color-secondary-dark);
    }
    
    .milla-input-wrapper {
        flex-direction: column;
    }
    
    .milla-input-wrapper .milla-width-40-percent {
        background: var(--milla-formpage-color-primary-light);
    }
    
    .milla-input-wrapper .milla-width-60-percent {
        background: white;
    }
}

@media (max-width: 768px) {
    .milla-input-wrapper .milla-width-40-percent .milla-p-10,
    .milla-input-wrapper .milla-width-60-percent .milla-p-10 {
        padding: 12px 16px !important;
    }
    
    .milla-form-mockup-item label.milla-font-size-16 {
        font-size: 13px !important;
    }
    
    .milla-input-field input.milla-field,
    .milla-input-field textarea.milla-field,
    .milla-input-field select.milla-field {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .milla-text-align-right .milla-btn {
        width: 100%;
        padding: 14px 24px !important;
    }
}

/* ===== SOLUCIÓN SIMPLE PARA CAMPOS OCULTOS ===== */
/* Ocultar campos con clase milla-display-none */
.milla-display-none {
    display: none !important;
    border: none !important;
}

/* Ocultar inputs de tipo hidden */
input[type="hidden"] {
    display: none !important;
    border: none !important;
}

/* ===== ESTILOS PARA SUBIDA MÚLTIPLE (IMÁGENES, AUDIO, VIDEO) ===== */

/* Wrapper para múltiples archivos */
.milla-image-upload-wrapper:not([data-admin-image="true"]),
.milla-audio-upload-wrapper,
.milla-video-upload-wrapper {
    background: white !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}

/* Área de upload */
.milla-upload-area {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    background: none !important;
    cursor: pointer !important;
}

.milla-upload-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    text-align: center !important;
}

.milla-upload-content p {
    margin: 0 0 10px 0 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    opacity: 0.7 !important;
}

/* Botones de selección múltiple */
.milla-select-image-button,
.milla-select-audio-button,
.milla-select-video-button {
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    min-height: auto !important;
    line-height: normal !important;
    margin-bottom: 6px !important;
}

.milla-select-image-button:hover,
.milla-select-audio-button:hover,
.milla-select-video-button:hover {
    background: var(--milla-formpage-color-primary-dark-alt) !important;
}

.milla-select-image-button:focus,
.milla-select-audio-button:focus,
.milla-select-video-button:focus {
    outline: none !important;
}

/* Botón de subida */
.milla-upload-image-button,
.milla-upload-audio-button,
.milla-upload-video-button {
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    min-height: auto !important;
    line-height: normal !important;
    margin-bottom: 12px !important;
}

.milla-upload-image-button:hover,
.milla-upload-audio-button:hover,
.milla-upload-video-button:hover {
    background: var(--milla-formpage-color-primary-dark-alt) !important;
}

.milla-upload-image-button:focus,
.milla-upload-audio-button:focus,
.milla-upload-video-button:focus {
    outline: none !important;
}

/* Barra de progreso */
.milla-upload-progress {
    background: var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    margin: 12px 0 !important;
    width: 100% !important;
    height: 6px !important;
}

.milla-progress-bar {
    background: var(--milla-formpage-color-primary-dark) !important;
    height: 100% !important;
    border-radius: 50px !important;
    transition: width 0.3s ease !important;
}

.milla-progress-text {
    text-align: center !important;
    font-weight: 500 !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    margin: 6px 0 !important;
    font-size: 12px !important;
}

/* Grid de imágenes/archivos */
.milla-image-preview,
.milla-audio-preview,
.milla-video-preview {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Item individual de preview */
.milla-preview-item {
    background: white !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Controles de archivo (flechas arriba/abajo) */
.milla-file-controls {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    justify-content: center !important;
}

.milla-file-move-up,
.milla-file-move-down {
    background: white !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    min-height: auto !important;
    line-height: normal !important;
}

.milla-file-move-up:hover,
.milla-file-move-down:hover {
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
}

/* Contenido de media */
.milla-preview-item .milla-media-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Imágenes dentro del preview item */
.milla-preview-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 150px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    display: block !important;
    margin: 0 !important;
}

/* Info de la media */
.milla-preview-item .milla-media-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.milla-preview-item .milla-media-info small {
    font-size: 11px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    font-weight: 500 !important;
    text-align: center !important;
    word-break: break-word !important;
    opacity: 0.8 !important;
    margin: 0 !important;
}

.milla-preview-item .milla-media-info label {
    font-size: 11px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    font-weight: 600 !important;
    display: block !important;
    margin: 0 !important;
}

.milla-preview-item .milla-attachment-title {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    color: #495057 !important;
    background: white !important;
    box-sizing: border-box !important;
    margin: 4px 0 0 0 !important;
}

.milla-preview-item .milla-attachment-title:focus {
    outline: none !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
}

/* Botón eliminar dentro del preview item */
.milla-preview-item .milla-remove-single-image {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 6px 16px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    min-height: auto !important;
    line-height: normal !important;
}

.milla-preview-item .milla-remove-single-image:hover {
    background: #c82333 !important;
}

.milla-preview-item .milla-remove-single-image:focus {
    outline: none !important;
}

/* Texto de archivo seleccionado (para casos sin milla-preview-item) */
.milla-image-preview p,
.milla-audio-preview p,
.milla-video-preview p {
    font-size: 12px !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    margin: 4px 0 0 0 !important;
    font-weight: 500 !important;
    text-align: center !important;
    word-break: break-word !important;
}

/* Imágenes directas (sin milla-preview-item) */
.milla-image-preview > img,
.milla-audio-preview > audio,
.milla-video-preview > video {
    width: 100% !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    display: block !important;
}

/* Botones de acción en preview */
.milla-preview-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 6px !important;
    justify-content: center !important;
}

.milla-preview-actions button {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    min-height: auto !important;
    line-height: normal !important;
}

.milla-preview-actions button:hover {
    background: #c82333 !important;
}

.milla-preview-actions button:focus {
    outline: none !important;
}

/* Flechas de ordenamiento - más pequeñas */
.milla-group-move-up,
.milla-group-move-down {
    padding: 4px 10px !important;
    border: 1px solid var(--milla-formpage-color-secondary-dark) !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    background: white !important;
    color: var(--milla-formpage-color-primary-dark) !important;
    cursor: pointer !important;
}

.milla-group-move-up:hover,
.milla-group-move-down:hover {
    background: var(--milla-formpage-color-primary-dark) !important;
    color: white !important;
    border-color: var(--milla-formpage-color-primary-dark) !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .milla-image-preview,
    .milla-audio-preview,
    .milla-video-preview {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .milla-image-preview,
    .milla-audio-preview,
    .milla-video-preview {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 12px !important;
    }
}

@media (max-width: 768px) {
    .milla-image-upload-wrapper:not([data-admin-image="true"]),
    .milla-audio-upload-wrapper,
    .milla-video-upload-wrapper {
        padding: 12px !important;
    }
    
    .milla-select-image-button,
    .milla-select-audio-button,
    .milla-select-video-button,
    .milla-upload-image-button,
    .milla-upload-audio-button,
    .milla-upload-video-button {
        width: 100% !important;
        padding: 12px 16px !important;
    }
    
    .milla-image-preview,
    .milla-audio-preview,
    .milla-video-preview {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
    
    .milla-preview-item {
        padding: 10px !important;
    }
    
    .milla-preview-item img {
        max-height: 120px !important;
    }
}

@media (max-width: 480px) {
    .milla-image-preview,
    .milla-audio-preview,
    .milla-video-preview {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .milla-preview-item img {
        max-height: 200px !important;
    }
}

/* ===== MILLA CUSTOM FOOTER ===== */
.milla-app-footer {
    background: #2c3e50 !important;
    color: white !important;
    padding: 40px 0 !important;
    margin-top: 60px !important;
    border-top: 3px solid var(--milla-formpage-color-primary-dark) !important;
}

.milla-footer-container {
    max-width: 80% !important;
    margin: 0 auto !important;
    padding: 0 25px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

.milla-footer-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.milla-footer-logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.milla-footer-logo-image {
    max-width: 150px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.milla-footer-logo-icon {
    width: 32px !important;
    height: 32px !important;
    background: var(--milla-formpage-color-primary-dark) !important;
    border-radius: 50% !important;
    padding: 4px !important;
}

.milla-footer-company {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: white !important;
    letter-spacing: 1px !important;
}

.milla-footer-description {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.milla-footer-text-es,
.milla-footer-text-en {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #ecf0f1 !important;
    margin: 0 !important;
    opacity: 0.9 !important;
}

.milla-footer-social {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.milla-social-link {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.milla-social-link:hover {
    background: var(--milla-formpage-color-primary-dark) !important;
    transform: translateY(-2px) !important;
}

.milla-footer-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.milla-footer-contact-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 0 16px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.milla-footer-contact-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.milla-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    color: #ecf0f1 !important;
    line-height: 1.5 !important;
}

.milla-contact-icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

.milla-contact-item span {
    color: #ecf0f1 !important;
    font-weight: 500 !important;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .milla-app-footer {
        padding: 30px 0 !important;
        margin-top: 40px !important;
    }
    
    .milla-footer-container {
        max-width: 80% !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 0 20px !important;
    }
    
    .milla-footer-left {
        gap: 16px !important;
    }
    
    .milla-footer-logo-image {
        max-width: 120px !important;
        max-height: 50px !important;
    }
    
    .milla-footer-company {
        font-size: 20px !important;
    }
    
    .milla-footer-text-es,
    .milla-footer-text-en {
        font-size: 13px !important;
    }
    
    .milla-footer-contact-title {
        font-size: 16px !important;
    }
    
    .milla-contact-item {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .milla-footer-container {
        max-width: 80% !important;
        padding: 0 15px !important;
    }
    
    .milla-footer-logo {
        gap: 8px !important;
    }
    
    .milla-footer-logo-image {
        max-width: 100px !important;
        max-height: 40px !important;
    }
    
    .milla-footer-logo-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    .milla-footer-company {
        font-size: 18px !important;
    }
    
    .milla-social-link {
        width: 36px !important;
        height: 36px !important;
    }
}