/* =====================================================
   RAU Galería de Fotos — galeria.css
   Compatible con Divi (usa !important donde necesario)
   ===================================================== */

/* ── Variables ── */
:root {
    --rau-primary:    #2c7a4b;
    --rau-primary-h:  #1e5c37;
    --rau-edit:       #1a6fa8;
    --rau-edit-h:     #145580;
    --rau-danger:     #c0392b;
    --rau-radius:     10px;
    --rau-shadow:     0 4px 20px rgba(0,0,0,.15);
    --rau-font:       'Segoe UI', system-ui, sans-serif;
}

/* ── Barra de acciones admin ── */
.rau-galeria-admin-bar {
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
    flex-wrap: wrap !important;
}

/* ── Botones admin ── */
.rau-btn-admin {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    border: none !important;
    border-radius: var(--rau-radius) !important;
    font-family: var(--rau-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .2s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

.rau-btn-crear {
    background: linear-gradient(135deg, var(--rau-primary), #3aaa6a) !important;
    color: #fff !important;
}
.rau-btn-crear:hover {
    background: linear-gradient(135deg, var(--rau-primary-h), var(--rau-primary)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(44,122,75,.35) !important;
    color: #fff !important;
}

.rau-btn-editar {
    background: linear-gradient(135deg, var(--rau-edit), #2196c4) !important;
    color: #fff !important;
}
.rau-btn-editar:hover {
    background: linear-gradient(135deg, var(--rau-edit-h), var(--rau-edit)) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.rau-btn-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* ── MODAL ── */
.rau-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.65) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
    padding: 20px !important;
}

/* Ocultar modal - clase en lugar de style="display:none" para resistir Divi */
.rau-modal-hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Imagen destacada */
.rau-destacada-preview {
    margin-bottom: 10px !important;
}
.rau-destacada-preview img {
    width: 120px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
    display: block !important;
}
.rau-destacada-preview .rau-dest-remove {
    display: inline-block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    color: var(--rau-danger) !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-family: var(--rau-font) !important;
}

.rau-modal-box {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 36px !important;
    width: 100% !important;
    max-width: 580px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
    position: relative !important;
    animation: rauModalIn .25s ease !important;
}

@keyframes rauModalIn {
    from { opacity:0; transform:scale(.93) translateY(10px); }
    to   { opacity:1; transform:scale(1)  translateY(0); }
}

.rau-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    background: #f0f0f0 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    line-height: 32px !important;
    text-align: center !important;
    transition: background .2s !important;
    padding: 0 !important;
}
.rau-modal-close:hover { background: #e0e0e0 !important; }

.rau-modal-box h2 {
    margin: 0 0 24px !important;
    font-size: 22px !important;
    color: #1a1a1a !important;
    font-family: var(--rau-font) !important;
}

.rau-modal-field {
    margin-bottom: 20px !important;
}
.rau-modal-field label {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #333 !important;
    font-size: 14px !important;
}
.rau-modal-field input[type="text"] {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    transition: border-color .2s !important;
    box-sizing: border-box !important;
    font-family: var(--rau-font) !important;
}
.rau-modal-field input[type="text"]:focus {
    outline: none !important;
    border-color: var(--rau-primary) !important;
}

/* ── Preview grid modal ── */
.rau-preview-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    min-height: 10px !important;
}
.rau-preview-item {
    position: relative !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 6px !important;
    overflow: visible !important;
}
.rau-preview-item img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}
.rau-preview-remove {
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    background: var(--rau-danger) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
    cursor: pointer !important;
    line-height: 20px !important;
    text-align: center !important;
    padding: 0 !important;
}

.rau-btn-secondary {
    background: #f5f5f5 !important;
    border: 1.5px dashed #bbb !important;
    border-radius: 8px !important;
    padding: 9px 18px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all .2s !important;
    font-family: var(--rau-font) !important;
}
.rau-btn-secondary:hover {
    border-color: var(--rau-primary) !important;
    background: #f0faf4 !important;
}

/* ── Acciones modal ── */
.rau-modal-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eee !important;
}
.rau-btn-guardar {
    background: linear-gradient(135deg, var(--rau-primary), #3aaa6a) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all .2s !important;
    font-family: var(--rau-font) !important;
}
.rau-btn-guardar:hover {
    background: linear-gradient(135deg, var(--rau-primary-h), var(--rau-primary)) !important;
    transform: translateY(-1px) !important;
}
.rau-btn-guardar:disabled {
    opacity: .6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}
.rau-modal-msg {
    font-size: 14px !important;
    color: var(--rau-primary) !important;
    font-weight: 600 !important;
}
.rau-modal-msg.error { color: var(--rau-danger) !important; }

/* ── GALERÍA FRONT ── */
.rau-galeria-titulo {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    color: #1a1a1a !important;
}

.rau-galeria-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 10px !important;
}

.rau-galeria-item {
    position: relative !important;
    aspect-ratio: 1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
}
.rau-galeria-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .35s ease !important;
}
.rau-galeria-item:hover img { transform: scale(1.07) !important; }

.rau-galeria-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    opacity: 0 !important;
    transition: opacity .25s !important;
}
.rau-galeria-item:hover .rau-galeria-overlay { opacity: 1 !important; }

/* ── LIGHTBOX ── */
.rau-lightbox {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.92) !important;
    z-index: 100000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rau-lb-inner {
    max-width: 90vw !important;
    max-height: 85vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.rau-lb-inner img {
    max-width: 90vw !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: 0 0 60px rgba(0,0,0,.6) !important;
    animation: rauLbIn .2s ease !important;
}
@keyframes rauLbIn {
    from { opacity:0; transform:scale(.92); }
    to   { opacity:1; transform:scale(1); }
}
.rau-lb-close, .rau-lb-prev, .rau-lb-next {
    position: fixed !important;
    background: rgba(255,255,255,.12) !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background .2s !important;
    font-size: 28px !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.rau-lb-close { top:18px; right:18px; }
.rau-lb-prev  { left:18px; top:50%; transform:translateY(-50%); }
.rau-lb-next  { right:18px; top:50%; transform:translateY(-50%); }
.rau-lb-close:hover, .rau-lb-prev:hover, .rau-lb-next:hover {
    background: rgba(255,255,255,.28) !important;
}

/* ── LISTADO de galerías ── */
.rau-galeria-listado {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 20px !important;
}
.rau-galeria-card {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--rau-shadow) !important;
    background: #fff !important;
    transition: transform .25s, box-shadow .25s !important;
}
.rau-galeria-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.18) !important;
}
.rau-galeria-card-img {
    height: 150px !important;
    background-size: cover !important;
    background-position: center !important;
}
.rau-galeria-card-info {
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.rau-galeria-card-info strong { font-size: 15px !important; color:#1a1a1a !important; }
.rau-galeria-card-info span   { font-size: 13px !important; color:#888 !important; }
.rau-btn-ver {
    margin-top: 6px !important;
    color: var(--rau-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}
.rau-btn-ver:hover { text-decoration: underline !important; color: var(--rau-primary-h) !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .rau-galeria-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .rau-modal-box { padding: 24px 18px !important; }
    .rau-lb-prev { left:8px; }
    .rau-lb-next { right:8px; }
}

/* ── wp.media: backdrop inocuo, ventana siempre visible ── */
.media-modal-backdrop {
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.media-modal {
    z-index: 999999 !important;
}