/* ============================================================
   RAU — Presupuesto Display  |  v1.0.0
   Responsive · Compatible Divi · Paleta azul-pizarra RAU
   ============================================================ */

.rau-pd-wrap {
    --rau-azul:         #1565c0;
    --rau-azul-medio:   #1976d2;
    --rau-azul-claro:   #42a5f5;
    --rau-azul-bg:      #e3f2fd;
    --rau-verde:        #2e7d32;
    --rau-verde-bg:     #e8f5e9;
    --rau-rojo:         #c62828;
    --rau-rojo-bg:      #ffebee;
    --rau-naranja:      #e65100;
    --rau-naranja-bg:   #fff3e0;
    --rau-amarillo:     #f57f17;
    --rau-gris-txt:     #37474f;
    --rau-gris-label:   #78909c;
    --rau-gris-borde:   #e0e0e0;
    --rau-bg:           #ffffff;
    --rau-sombra:       0 2px 16px rgba(0,0,0,.09);
    --rau-radio:        12px;
    --rau-radio-sm:     8px;
    --rau-font:         'Segoe UI', system-ui, -apple-system, sans-serif;
}

.rau-pd-wrap *, .rau-pd-wrap *::before, .rau-pd-wrap *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ── Contenedor ────────────────────────────────────────────── */
.rau-pd-wrap {
    font-family: var(--rau-font);
    font-size: 15px;
    color: var(--rau-gris-txt);
    max-width: 920px;
    margin: 0 auto 2rem auto;
    background: var(--rau-bg);
    border-radius: var(--rau-radio);
    box-shadow: var(--rau-sombra);
    border: 1px solid var(--rau-gris-borde);
    overflow: hidden;
}

/* Borde superior por estado */
.rau-pd-estado--creado    { border-top: 4px solid var(--rau-azul); }
.rau-pd-estado--enviado   { border-top: 4px solid var(--rau-amarillo); }
.rau-pd-estado--aceptado  { border-top: 4px solid var(--rau-verde); }
.rau-pd-estado--rechazado { border-top: 4px solid var(--rau-rojo); }
.rau-pd-estado--sin-estado { border-top: 4px solid var(--rau-gris-borde); }

/* ── CABECERA ──────────────────────────────────────────────── */
.rau-pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 28px;
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 60%, #42a5f5 100%);
    color: #fff;
}

.rau-pd-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rau-pd-header__icon {
    font-size: 2.2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

.rau-pd-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: -.3px;
}

.rau-pd-ref {
    display: block;
    font-size: 0.78rem;
    opacity: .7;
    letter-spacing: .5px;
    margin-top: 3px;
}

.rau-pd-header__right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.rau-pd-fecha-badge {
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
}

/* ── BADGES estado ─────────────────────────────────────────── */
.rau-pd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.rau-pd-badge--creado    { background: rgba(255,255,255,.2);  color: #fff; border: 1px solid rgba(255,255,255,.5); }
.rau-pd-badge--enviado   { background: #fff8e1; color: #e65100; }
.rau-pd-badge--aceptado  { background: #c8e6c9; color: #1b5e20; }
.rau-pd-badge--rechazado { background: var(--rau-rojo-bg); color: var(--rau-rojo); }
.rau-pd-badge--sin-estado { background: rgba(255,255,255,.15); color: #fff; }

/* ── CUERPO GRID ───────────────────────────────────────────── */
.rau-pd-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rau-gris-borde);
}

/* ── TARJETAS ──────────────────────────────────────────────── */
.rau-pd-card {
    background: var(--rau-bg);
    padding: 22px 28px;
}

.rau-pd-card--full {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rau-gris-borde);
}

.rau-pd-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--rau-azul-bg);
}

.rau-pd-card__icon { font-size: 1.1rem; }

.rau-pd-card__header h3 {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .8px !important;
    color: var(--rau-azul-medio) !important;
    margin: 0 !important;
    flex: 1;
}

.rau-pd-link-ext {
    font-size: 0.9rem;
    color: var(--rau-gris-label) !important;
    text-decoration: none !important;
    transition: color .2s;
}
.rau-pd-link-ext:hover { color: var(--rau-azul-medio) !important; }

.rau-pd-fotos-count {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--rau-azul-bg);
    color: var(--rau-azul);
    padding: 2px 8px;
    border-radius: 20px;
}

/* ── FILAS ─────────────────────────────────────────────────── */
.rau-pd-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #f5f5f5;
}
.rau-pd-row:last-child { border-bottom: none; }

.rau-pd-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--rau-gris-label);
    flex: 0 0 130px;
    min-width: 130px;
}

.rau-pd-value {
    font-size: 0.9rem;
    color: var(--rau-gris-txt);
    font-weight: 500;
    word-break: break-word;
}

.rau-pd-value--link {
    color: var(--rau-azul-medio) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.rau-pd-value--link:hover { text-decoration: underline !important; }

/* Importe destacado */
.rau-pd-importe {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--rau-azul) !important;
    letter-spacing: -.3px;
}

.rau-pd-empty {
    font-size: 0.85rem;
    color: var(--rau-gris-label);
    font-style: italic;
    padding: 8px 0;
}

/* ── DESCRIPCIÓN ───────────────────────────────────────────── */
.rau-pd-desc-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--rau-gris-txt);
    background: #f8fbff;
    padding: 16px 20px;
    border-radius: var(--rau-radio-sm);
    border-left: 3px solid var(--rau-azul-claro);
}
.rau-pd-desc-text p { margin-bottom: .6em; }
.rau-pd-desc-text p:last-child { margin-bottom: 0; }

/* ── GALERÍA FOTOS ─────────────────────────────────────────── */
.rau-pd-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.rau-pd-foto-thumb {
    display: block;
    position: relative;
    border-radius: var(--rau-radio-sm);
    overflow: hidden;
    aspect-ratio: 1;
    background: #f0f4f8;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    transition: transform .2s, box-shadow .2s;
}
.rau-pd-foto-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.rau-pd-foto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s;
}
.rau-pd-foto-overlay {
    position: absolute;
    inset: 0;
    background: rgba(21, 101, 192, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity .2s;
}
.rau-pd-foto-thumb:hover .rau-pd-foto-overlay { opacity: 1; }

/* ── LLAMADA ORIGEN (info extra) ───────────────────────────── */
.rau-pd-llamada-origen {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rau-pd-llamada-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--rau-gris-label);
    flex-wrap: wrap;
}

.rau-pd-dias {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}
.rau-pd-dias--ok    { background: #e8f5e9; color: #2e7d32; }
.rau-pd-dias--medio { background: #fff8e1; color: #f57f17; }
.rau-pd-dias--alto  { background: var(--rau-rojo-bg); color: var(--rau-rojo); }

/* ── SECCIÓN DE ACCIONES ───────────────────────────────────── */
.rau-pd-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 28px;
    background: #f8f9fa;
    border-top: 2px solid var(--rau-azul-bg);
}

/* Estado actual */
.rau-pd-estado-actual {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.rau-pd-estado-actual__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--rau-gris-label);
    white-space: nowrap;
}

.rau-pd-badge--lg {
    font-size: 0.82rem !important;
    padding: 6px 14px !important;
}

/* Divisor visual entre estado y botones */
.rau-pd-acciones__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
    border-left: 1px solid var(--rau-gris-borde);
    padding-left: 16px;
}

/* Botones de acción */
.rau-pd-accion-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 18px;
    border: 2px solid transparent;
    border-radius: var(--rau-radio-sm);
    background: #fff;
    font-family: var(--rau-font);
    cursor: pointer;
    transition: all .18s;
    outline: none;
    min-width: 110px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.rau-pd-accion-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
.rau-pd-accion-btn:active:not(:disabled) { transform: translateY(0); }

.rau-pd-btn-icon  { font-size: 1.3rem; line-height: 1; }
.rau-pd-btn-label { font-size: 0.85rem; font-weight: 700; color: var(--rau-gris-txt); }
.rau-pd-btn-sub   { font-size: 0.68rem; color: var(--rau-gris-label); white-space: nowrap; }

/* Enviado */
.rau-pd-accion-btn--enviado {
    border-color: var(--rau-amarillo);
}
.rau-pd-accion-btn--enviado:hover:not(:disabled) {
    background: var(--rau-naranja-bg);
    border-color: var(--rau-naranja);
}
.rau-pd-accion-btn--enviado .rau-pd-btn-label { color: var(--rau-naranja); }

/* Aceptado */
.rau-pd-accion-btn--aceptado {
    border-color: var(--rau-verde);
    background: var(--rau-verde-bg);
}
.rau-pd-accion-btn--aceptado:hover:not(:disabled) {
    background: #c8e6c9;
    border-color: var(--rau-verde);
}
.rau-pd-accion-btn--aceptado .rau-pd-btn-label { color: var(--rau-verde); }

/* Rechazado */
.rau-pd-accion-btn--rechazado {
    border-color: var(--rau-rojo);
}
.rau-pd-accion-btn--rechazado:hover:not(:disabled) {
    background: var(--rau-rojo-bg);
}
.rau-pd-accion-btn--rechazado .rau-pd-btn-label { color: var(--rau-rojo); }

/* Disabled */
.rau-pd-accion-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none !important;
}

/* Loading */
.rau-pd-btn--loading { opacity: .65; pointer-events: none; }
.rau-pd-btn--loading::after {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: rauPdSpin .6s linear infinite;
    margin-left: 4px;
}
@keyframes rauPdSpin { to { transform: rotate(360deg); } }

/* ── PIE ───────────────────────────────────────────────────── */
.rau-pd-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 28px;
    background: #fafafa;
    border-top: 1px solid var(--rau-gris-borde);
}

.rau-pd-meta {
    font-size: 0.75rem;
    color: var(--rau-gris-label);
}

.rau-pd-btn-edit {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rau-azul-medio) !important;
    text-decoration: none !important;
    padding: 6px 14px;
    border: 1px solid var(--rau-azul-medio);
    border-radius: 20px;
    transition: background .2s, color .2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rau-pd-btn-edit:hover {
    background: var(--rau-azul-medio);
    color: #fff !important;
}

/* ── Error ─────────────────────────────────────────────────── */
.rau-pd-error {
    padding: 16px;
    background: var(--rau-rojo-bg);
    color: var(--rau-rojo);
    border-radius: var(--rau-radio-sm);
    font-size: 0.9rem;
    border: 1px solid #ef9a9a;
}

/* ── Toast ─────────────────────────────────────────────────── */
.rau-pd-toast {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 99999;
    padding: 12px 20px;
    border-radius: var(--rau-radio-sm);
    font-family: var(--rau-font);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    max-width: 320px;
}
.rau-pd-toast--visible  { opacity: 1; transform: translateY(0); }
.rau-pd-toast--success  { background: var(--rau-azul); color: #fff; }
.rau-pd-toast--error    { background: var(--rau-rojo); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 660px) {
    .rau-pd-body { grid-template-columns: 1fr; }
    .rau-pd-card--full { grid-column: 1; }
    .rau-pd-header { padding: 16px 18px; flex-direction: column; align-items: flex-start; }
    .rau-pd-card { padding: 16px 18px; }
    .rau-pd-label { flex: 0 0 110px; min-width: 110px; }
    .rau-pd-footer, .rau-pd-estados { padding: 12px 18px; }
    .rau-pd-galeria { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .rau-pd-acciones { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 18px; }
    .rau-pd-acciones__btns { border-left: none; padding-left: 0; border-top: 1px solid var(--rau-gris-borde); padding-top: 12px; width: 100%; }
    .rau-pd-accion-btn { min-width: 0; flex: 1; }
}

@media (max-width: 420px) {
    .rau-pd-row { flex-direction: column; gap: 2px; }
    .rau-pd-label { flex: none; min-width: 0; }
    .rau-pd-title { font-size: 1.1rem !important; }
    .rau-pd-estados__btns { gap: 6px; }
    .rau-pd-estado-btn { font-size: 0.78rem; padding: 7px 12px; }
}

/* ============================================================
   OVERRIDES DIVI
   ============================================================ */
.et_pb_section .rau-pd-wrap,
.et_pb_row .rau-pd-wrap { max-width: 920px !important; width: 100% !important; }

.et_pb_section .rau-pd-title,
.et_pb_row .rau-pd-title {
    font-size: 1.35rem !important; color: #fff !important;
    text-transform: none !important; letter-spacing: -.3px !important; margin-bottom: 0 !important;
}
.et_pb_section .rau-pd-card__header h3,
.et_pb_row .rau-pd-card__header h3 {
    font-size: 0.82rem !important; text-transform: uppercase !important;
    color: var(--rau-azul-medio) !important; margin: 0 !important; padding: 0 !important;
}
.et_pb_section .rau-pd-desc-text,
.et_pb_row .rau-pd-desc-text { font-size: 0.9rem !important; line-height: 1.7 !important; }

.et_pb_section a.rau-pd-value--link,
.et_pb_row a.rau-pd-value--link { color: var(--rau-azul-medio) !important; text-decoration: none !important; }

.et_pb_section a.rau-pd-btn-edit,
.et_pb_row a.rau-pd-btn-edit { color: var(--rau-azul-medio) !important; text-decoration: none !important; }
.et_pb_section a.rau-pd-btn-edit:hover,
.et_pb_row a.rau-pd-btn-edit:hover { color: #fff !important; background: var(--rau-azul-medio) !important; }

.et_pb_section .rau-pd-accion-btn,
.et_pb_row .rau-pd-accion-btn {
    font-size: 0.85rem !important; text-transform: none !important;
    letter-spacing: normal !important;
}
.et_pb_section .rau-pd-btn-sub,
.et_pb_row .rau-pd-btn-sub {
    font-size: 0.68rem !important;
}