/* ================================================
   RAU Crear Evento — Modal Form Styles
   v1.1 — compatible con Divi
   ================================================ */

:root {
    --rau-ce-accent:      #2563eb;
    --rau-ce-accent-dark: #1d4ed8;
    --rau-ce-accent-soft: #dbeafe;
    --rau-ce-danger:      #dc2626;
    --rau-ce-success:     #16a34a;
    --rau-ce-bg:          #ffffff;
    --rau-ce-surface:     #f8fafc;
    --rau-ce-border:      #e2e8f0;
    --rau-ce-text:        #0f172a;
    --rau-ce-muted:       #64748b;
    --rau-ce-shadow:      0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
    --rau-ce-radius:      12px;
    --rau-ce-radius-sm:   8px;
    --rau-ce-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rau-ce-transition:  .18s cubic-bezier(.4,0,.2,1);
}

/* ── Body lock ── */
body.rau-ce-body-lock {
    overflow: hidden !important;
}

/* ── Botón disparador ── */
.rau-ce-btn-open {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             8px !important;
    background:      var(--rau-ce-accent) !important;
    color:           #fff !important;
    border:          none !important;
    border-radius:   var(--rau-ce-radius-sm) !important;
    padding:         12px 22px !important;
    font-family:     var(--rau-ce-font) !important;
    font-size:       15px !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    transition:      background var(--rau-ce-transition), transform var(--rau-ce-transition), box-shadow var(--rau-ce-transition) !important;
    box-shadow:      0 2px 8px rgba(37,99,235,.3) !important;
    text-transform:  none !important;
    letter-spacing:  normal !important;
    line-height:     1.4 !important;
}
.rau-ce-btn-open:hover {
    background:  var(--rau-ce-accent-dark) !important;
    transform:   translateY(-1px) !important;
    box-shadow:  0 4px 16px rgba(37,99,235,.4) !important;
    color:       #fff !important;
}
.rau-ce-btn-open:active { transform: translateY(0) !important; }
.rau-ce-btn-icon {
    font-size:   18px !important;
    line-height: 1 !important;
    font-style:  normal !important;
}

/* ── Overlay — z-index muy por encima de Divi (usa hasta ~9999) ── */
.rau-ce-overlay {
    position:        fixed !important;
    top:             0 !important;
    left:            0 !important;
    right:           0 !important;
    bottom:          0 !important;
    width:           100% !important;
    height:          100% !important;
    background:      rgba(15,23,42,.60) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index:         999999 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    padding:         16px !important;
    box-sizing:      border-box !important;
    /* Transición suave de apertura/cierre */
    opacity:         1 !important;
    visibility:      visible !important;
    transition:      opacity .18s ease, visibility .18s ease !important;
}
/* Estado oculto — usa clase, NO display:none, para que Divi no lo anule */
.rau-ce-overlay--hidden {
    opacity:         0 !important;
    visibility:      hidden !important;
    pointer-events:  none !important;
    /* Forzamos que no sea display:flex cuando está oculto */
    display:         flex !important; /* mantenemos flex pero con visibility:hidden */
}

/* ── Modal ── */
.rau-ce-modal {
    background:    var(--rau-ce-bg) !important;
    border-radius: var(--rau-ce-radius) !important;
    box-shadow:    var(--rau-ce-shadow) !important;
    width:         100% !important;
    max-width:     680px !important;
    max-height:    90vh !important;
    overflow-y:    auto !important;
    overflow-x:    hidden !important;
    position:      relative !important;
    animation:     rauSlideUp .22s cubic-bezier(.34,1.56,.64,1) both;
    scrollbar-width: thin;
    scrollbar-color: var(--rau-ce-border) transparent;
}
@keyframes rauSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.rau-ce-modal-header {
    display:          flex !important;
    align-items:      center !important;
    justify-content:  space-between !important;
    padding:          22px 28px 18px !important;
    border-bottom:    1px solid var(--rau-ce-border) !important;
    position:         sticky !important;
    top:              0 !important;
    background:       var(--rau-ce-bg) !important;
    z-index:          1 !important;
}
.rau-ce-modal-header h2 {
    margin:         0 !important;
    padding:        0 !important;
    font-family:    var(--rau-ce-font) !important;
    font-size:      20px !important;
    font-weight:    700 !important;
    color:          var(--rau-ce-text) !important;
    letter-spacing: -.3px !important;
    border:         none !important;
    background:     none !important;
}
.rau-ce-btn-close {
    background:    none !important;
    border:        none !important;
    font-size:     24px !important;
    color:         var(--rau-ce-muted) !important;
    cursor:        pointer !important;
    padding:       4px 8px !important;
    border-radius: 6px !important;
    line-height:   1 !important;
    transition:    color var(--rau-ce-transition), background var(--rau-ce-transition) !important;
    box-shadow:    none !important;
}
.rau-ce-btn-close:hover {
    background: var(--rau-ce-surface) !important;
    color:      var(--rau-ce-text) !important;
}

/* ── Notice ── */
.rau-ce-notice {
    margin:        16px 28px 0 !important;
    padding:       12px 16px !important;
    border-radius: var(--rau-ce-radius-sm) !important;
    font-family:   var(--rau-ce-font) !important;
    font-size:     14px !important;
    font-weight:   500 !important;
    border-left:   4px solid !important;
}
.rau-ce-notice--success { background: #f0fdf4 !important; border-color: var(--rau-ce-success) !important; color: #166534 !important; }
.rau-ce-notice--error   { background: #fef2f2 !important; border-color: var(--rau-ce-danger)  !important; color: #991b1b !important; }

/* ── Form grid ── */
.rau-ce-form {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   16px 20px !important;
    padding:               24px 28px !important;
    margin:                0 !important;
}

/* ── Campo individual ── */
.rau-ce-field {
    display:        flex !important;
    flex-direction: column !important;
    gap:            6px !important;
    margin:         0 !important;
}
.rau-ce-field--full { grid-column: 1 / -1 !important; }
.rau-ce-field label {
    font-family:    var(--rau-ce-font) !important;
    font-size:      13px !important;
    font-weight:    600 !important;
    color:          var(--rau-ce-text) !important;
    letter-spacing: .2px !important;
    margin:         0 !important;
    padding:        0 !important;
    display:        block !important;
}
.rau-ce-req { color: var(--rau-ce-danger) !important; margin-left: 2px !important; }

/* ── Inputs / Selects / Textareas — reset Divi ── */
.rau-ce-form input[type="text"],
.rau-ce-form input[type="number"],
.rau-ce-form input[type="url"],
.rau-ce-form input[type="date"],
.rau-ce-form select,
.rau-ce-form textarea {
    font-family:    var(--rau-ce-font) !important;
    font-size:      14px !important;
    color:          var(--rau-ce-text) !important;
    background:     var(--rau-ce-surface) !important;
    border:         1.5px solid var(--rau-ce-border) !important;
    border-radius:  var(--rau-ce-radius-sm) !important;
    padding:        10px 12px !important;
    width:          100% !important;
    box-sizing:     border-box !important;
    transition:     border-color var(--rau-ce-transition), box-shadow var(--rau-ce-transition) !important;
    appearance:     none !important;
    -webkit-appearance: none !important;
    margin:         0 !important;
    outline:        none !important;
    box-shadow:     none !important;
    line-height:    1.5 !important;
}
.rau-ce-form input::placeholder,
.rau-ce-form textarea::placeholder { color: #94a3b8 !important; }
.rau-ce-form input:focus,
.rau-ce-form select:focus,
.rau-ce-form textarea:focus {
    border-color: var(--rau-ce-accent) !important;
    box-shadow:   0 0 0 3px var(--rau-ce-accent-soft) !important;
    background:   #fff !important;
    outline:      none !important;
}
.rau-ce-form input.rau-ce-invalid,
.rau-ce-form select.rau-ce-invalid,
.rau-ce-form textarea.rau-ce-invalid {
    border-color: var(--rau-ce-danger) !important;
    box-shadow:   0 0 0 3px #fee2e2 !important;
}
.rau-ce-form select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 12px center !important;
    padding-right:       36px !important;
    cursor:              pointer !important;
}
.rau-ce-form textarea {
    resize:     vertical !important;
    min-height: 90px !important;
}

/* ── Toggle switch ── */
.rau-ce-field--toggle {
    justify-content: center !important;
    padding-top:     8px !important;
}
.rau-ce-toggle-label {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    cursor:      pointer !important;
    font-family: var(--rau-ce-font) !important;
    font-size:   14px !important;
    font-weight: 500 !important;
    color:       var(--rau-ce-text) !important;
    user-select: none !important;
    margin:      0 !important;
}
.rau-ce-toggle-input {
    position: absolute !important;
    opacity:  0 !important;
    width:    0 !important;
    height:   0 !important;
    margin:   0 !important;
}
.rau-ce-toggle-track {
    width:         44px !important;
    height:        24px !important;
    background:    var(--rau-ce-border) !important;
    border-radius: 100px !important;
    position:      relative !important;
    flex-shrink:   0 !important;
    transition:    background var(--rau-ce-transition) !important;
    display:       inline-block !important;
}
.rau-ce-toggle-thumb {
    position:      absolute !important;
    top:           3px !important;
    left:          3px !important;
    width:         18px !important;
    height:        18px !important;
    background:    #fff !important;
    border-radius: 50% !important;
    box-shadow:    0 1px 4px rgba(0,0,0,.2) !important;
    transition:    transform var(--rau-ce-transition) !important;
    display:       block !important;
}
.rau-ce-toggle-input:checked + .rau-ce-toggle-track,
.rau-ce-toggle-input:checked ~ .rau-ce-toggle-track { background: var(--rau-ce-accent) !important; }
.rau-ce-toggle-input:checked + .rau-ce-toggle-track .rau-ce-toggle-thumb,
.rau-ce-toggle-input:checked ~ .rau-ce-toggle-track .rau-ce-toggle-thumb { transform: translateX(20px) !important; }

/* ── Campo precio oculto cuando gratis ── */
.rau-ce-field--precio.rau-ce-hidden { display: none !important; }

/* ── Upload de imagen ── */
.rau-ce-image-upload input[type="file"] {
    display: none !important;
}
.rau-ce-image-placeholder {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    padding:         28px 20px !important;
    border:          2px dashed var(--rau-ce-border) !important;
    border-radius:   var(--rau-ce-radius-sm) !important;
    cursor:          pointer !important;
    color:           var(--rau-ce-muted) !important;
    background:      var(--rau-ce-surface) !important;
    transition:      border-color var(--rau-ce-transition), background var(--rau-ce-transition) !important;
    text-align:      center !important;
    font-family:     var(--rau-ce-font) !important;
    font-size:       13px !important;
}
.rau-ce-image-placeholder:hover,
.rau-ce-image-upload.rau-ce-drag-over .rau-ce-image-placeholder {
    border-color: var(--rau-ce-accent) !important;
    background:   var(--rau-ce-accent-soft) !important;
    color:        var(--rau-ce-accent) !important;
}
.rau-ce-image-placeholder small { color: #94a3b8 !important; font-size: 11px !important; }
.rau-ce-image-preview {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            8px !important;
}
.rau-ce-image-preview .rau-ce-preview-img {
    width:         100% !important;
    max-height:    180px !important;
    object-fit:    cover !important;
    border-radius: var(--rau-ce-radius-sm) !important;
    border:        1.5px solid var(--rau-ce-border) !important;
    display:       block !important;
}
.rau-ce-image-remove {
    background:    none !important;
    border:        1.5px solid var(--rau-ce-border) !important;
    color:         var(--rau-ce-danger) !important;
    border-radius: 6px !important;
    padding:       6px 12px !important;
    font-size:     12px !important;
    font-weight:   600 !important;
    cursor:        pointer !important;
    transition:    border-color var(--rau-ce-transition), background var(--rau-ce-transition) !important;
    box-shadow:    none !important;
}
.rau-ce-image-remove:hover {
    border-color: var(--rau-ce-danger) !important;
    background:   #fef2f2 !important;
}

/* ── Footer ── */
.rau-ce-modal-footer {
    grid-column:     1 / -1 !important;
    display:         flex !important;
    justify-content: flex-end !important;
    gap:             10px !important;
    padding-top:     16px !important;
    border-top:      1px solid var(--rau-ce-border) !important;
    margin-top:      4px !important;
}
.rau-ce-btn-cancel {
    background:    none !important;
    border:        1.5px solid var(--rau-ce-border) !important;
    color:         var(--rau-ce-muted) !important;
    border-radius: var(--rau-ce-radius-sm) !important;
    padding:       11px 20px !important;
    font-family:   var(--rau-ce-font) !important;
    font-size:     14px !important;
    font-weight:   600 !important;
    cursor:        pointer !important;
    transition:    all var(--rau-ce-transition) !important;
    box-shadow:    none !important;
    text-transform: none !important;
}
.rau-ce-btn-cancel:hover {
    border-color: var(--rau-ce-text) !important;
    color:        var(--rau-ce-text) !important;
}
.rau-ce-btn-submit {
    background:      var(--rau-ce-accent) !important;
    color:           #fff !important;
    border:          none !important;
    border-radius:   var(--rau-ce-radius-sm) !important;
    padding:         11px 24px !important;
    font-family:     var(--rau-ce-font) !important;
    font-size:       14px !important;
    font-weight:     700 !important;
    cursor:          pointer !important;
    transition:      background var(--rau-ce-transition), transform var(--rau-ce-transition) !important;
    min-width:       140px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    box-shadow:      none !important;
    text-transform:  none !important;
    letter-spacing:  normal !important;
}
.rau-ce-btn-submit:hover:not(:disabled) {
    background: var(--rau-ce-accent-dark) !important;
    transform:  translateY(-1px) !important;
    color:      #fff !important;
}
.rau-ce-btn-submit:disabled { opacity: .65 !important; cursor: not-allowed !important; transform: none !important; }

/* ── Spinner ── */
.rau-ce-btn-submit-loading::before {
    content:       '';
    display:       inline-block;
    width:         14px;
    height:        14px;
    border:        2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     rauSpin .65s linear infinite;
}
@keyframes rauSpin { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 580px) {
    .rau-ce-form {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
    }
    .rau-ce-field--full { grid-column: 1 !important; }
    .rau-ce-modal-header { padding: 16px 16px 14px !important; }
    .rau-ce-modal-footer {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .rau-ce-btn-cancel,
    .rau-ce-btn-submit { width: 100% !important; justify-content: center !important; }
}