/* ================================================
   RAU Crear Empresa — Modal Form Styles
   v1.0 — compatible con Divi
   ================================================ */

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

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

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

/* ── Overlay ── */
.rau-cemp-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;
    opacity:         1 !important;
    visibility:      visible !important;
    transition:      opacity .18s ease, visibility .18s ease !important;
}
.rau-cemp-overlay--hidden {
    opacity:        0 !important;
    visibility:     hidden !important;
    pointer-events: none !important;
    display:        flex !important;
}

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

/* ── Header ── */
.rau-cemp-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-cemp-border) !important;
    position:         sticky !important;
    top:              0 !important;
    background:       var(--rau-cemp-bg) !important;
    z-index:          1 !important;
}
.rau-cemp-modal-header h2 {
    margin:         0 !important;
    padding:        0 !important;
    font-family:    var(--rau-cemp-font) !important;
    font-size:      20px !important;
    font-weight:    700 !important;
    color:          var(--rau-cemp-text) !important;
    letter-spacing: -.3px !important;
    border:         none !important;
    background:     none !important;
}
.rau-cemp-btn-close {
    background:    none !important;
    border:        none !important;
    font-size:     24px !important;
    color:         var(--rau-cemp-muted) !important;
    cursor:        pointer !important;
    padding:       4px 8px !important;
    border-radius: 6px !important;
    line-height:   1 !important;
    transition:    color var(--rau-cemp-transition), background var(--rau-cemp-transition) !important;
    box-shadow:    none !important;
}
.rau-cemp-btn-close:hover {
    background: var(--rau-cemp-surface) !important;
    color:      var(--rau-cemp-text) !important;
}

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

/* ── Form grid (3 columnas en escritorio) ── */
.rau-cemp-form {
    display:               grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap:                   16px 20px !important;
    padding:               24px 28px !important;
    margin:                0 !important;
}

/* ── Campo individual ── */
.rau-cemp-field {
    display:        flex !important;
    flex-direction: column !important;
    gap:            6px !important;
    margin:         0 !important;
}
.rau-cemp-field--full { grid-column: 1 / -1 !important; }
.rau-cemp-field--half { grid-column: span 2 !important; }

.rau-cemp-field label {
    font-family:    var(--rau-cemp-font) !important;
    font-size:      13px !important;
    font-weight:    600 !important;
    color:          var(--rau-cemp-text) !important;
    letter-spacing: .2px !important;
    margin:         0 !important;
    padding:        0 !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            5px !important;
}
.rau-cemp-req { color: var(--rau-cemp-danger) !important; margin-left: 2px !important; }
.rau-cemp-social-icon {
    display:     inline-flex !important;
    color:       var(--rau-cemp-muted) !important;
    flex-shrink: 0 !important;
}

/* ── Inputs / Selects / Textareas ── */
.rau-cemp-form input[type="text"],
.rau-cemp-form input[type="tel"],
.rau-cemp-form input[type="email"],
.rau-cemp-form input[type="url"],
.rau-cemp-form select,
.rau-cemp-form textarea {
    font-family:    var(--rau-cemp-font) !important;
    font-size:      14px !important;
    color:          var(--rau-cemp-text) !important;
    background:     var(--rau-cemp-surface) !important;
    border:         1.5px solid var(--rau-cemp-border) !important;
    border-radius:  var(--rau-cemp-radius-sm) !important;
    padding:        10px 12px !important;
    width:          100% !important;
    box-sizing:     border-box !important;
    transition:     border-color var(--rau-cemp-transition), box-shadow var(--rau-cemp-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-cemp-form input::placeholder,
.rau-cemp-form textarea::placeholder { color: #94a3b8 !important; }
.rau-cemp-form input:focus,
.rau-cemp-form select:focus,
.rau-cemp-form textarea:focus {
    border-color: var(--rau-cemp-accent) !important;
    box-shadow:   0 0 0 3px var(--rau-cemp-accent-soft) !important;
    background:   #fff !important;
    outline:      none !important;
}
.rau-cemp-form input.rau-cemp-invalid,
.rau-cemp-form select.rau-cemp-invalid,
.rau-cemp-form textarea.rau-cemp-invalid {
    border-color: var(--rau-cemp-danger) !important;
    box-shadow:   0 0 0 3px #fee2e2 !important;
}
.rau-cemp-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-cemp-form textarea {
    resize:     vertical !important;
    min-height: 90px !important;
}

/* ── Upload de imagen ── */
.rau-cemp-image-upload input[type="file"] { display: none !important; }
.rau-cemp-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-cemp-border) !important;
    border-radius:   var(--rau-cemp-radius-sm) !important;
    cursor:          pointer !important;
    color:           var(--rau-cemp-muted) !important;
    background:      var(--rau-cemp-surface) !important;
    transition:      border-color var(--rau-cemp-transition), background var(--rau-cemp-transition) !important;
    text-align:      center !important;
    font-family:     var(--rau-cemp-font) !important;
    font-size:       13px !important;
}
.rau-cemp-image-placeholder:hover,
.rau-cemp-image-upload.rau-cemp-drag-over .rau-cemp-image-placeholder {
    border-color: var(--rau-cemp-accent) !important;
    background:   var(--rau-cemp-accent-soft) !important;
    color:        var(--rau-cemp-accent) !important;
}
.rau-cemp-image-placeholder small { color: #94a3b8 !important; font-size: 11px !important; }
.rau-cemp-image-preview {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            8px !important;
}
.rau-cemp-image-preview .rau-cemp-preview-img {
    width:         100% !important;
    max-height:    160px !important;
    object-fit:    cover !important;
    border-radius: var(--rau-cemp-radius-sm) !important;
    border:        1.5px solid var(--rau-cemp-border) !important;
    display:       block !important;
}
.rau-cemp-image-remove {
    background:    none !important;
    border:        1.5px solid var(--rau-cemp-border) !important;
    color:         var(--rau-cemp-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-cemp-transition), background var(--rau-cemp-transition) !important;
    box-shadow:    none !important;
}
.rau-cemp-image-remove:hover {
    border-color: var(--rau-cemp-danger) !important;
    background:   #fef2f2 !important;
}

/* ── Footer ── */
.rau-cemp-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-cemp-border) !important;
    margin-top:      4px !important;
}
.rau-cemp-btn-cancel {
    background:     none !important;
    border:         1.5px solid var(--rau-cemp-border) !important;
    color:          var(--rau-cemp-muted) !important;
    border-radius:  var(--rau-cemp-radius-sm) !important;
    padding:        11px 20px !important;
    font-family:    var(--rau-cemp-font) !important;
    font-size:      14px !important;
    font-weight:    600 !important;
    cursor:         pointer !important;
    transition:     all var(--rau-cemp-transition) !important;
    box-shadow:     none !important;
    text-transform: none !important;
}
.rau-cemp-btn-cancel:hover {
    border-color: var(--rau-cemp-text) !important;
    color:        var(--rau-cemp-text) !important;
}
.rau-cemp-btn-submit {
    background:      var(--rau-cemp-accent) !important;
    color:           #fff !important;
    border:          none !important;
    border-radius:   var(--rau-cemp-radius-sm) !important;
    padding:         11px 24px !important;
    font-family:     var(--rau-cemp-font) !important;
    font-size:       14px !important;
    font-weight:     700 !important;
    cursor:          pointer !important;
    transition:      background var(--rau-cemp-transition), transform var(--rau-cemp-transition) !important;
    min-width:       150px !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-cemp-btn-submit:hover:not(:disabled) {
    background: var(--rau-cemp-accent-dark) !important;
    transform:  translateY(-1px) !important;
    color:      #fff !important;
}
.rau-cemp-btn-submit:disabled {
    opacity: .65 !important;
    cursor:  not-allowed !important;
    transform: none !important;
}

/* ── Spinner ── */
.rau-cemp-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:     rauCempSpin .65s linear infinite;
}
@keyframes rauCempSpin { to { transform: rotate(360deg); } }

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