/* Hallmark · macrostructure: Workbench · tone: premium-limpio · anchor hue: cool (azul marca)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * Rediseño de la vista de detalle de presupuesto YITH (myaccount/view-quote.php).
 * Override en el tema hijo; NO toca el plugin YITH. Reutiliza sb_lucide() del blog.
 * Reversible borrando este archivo + la plantilla del hijo.
 */

.svq {
    /* Paper / tinta (mismo sistema que el blog para coherencia de marca) */
    --svq-paper:      #ffffff;
    --svq-paper-2:    #f5f8fc;
    --svq-paper-3:    #eef3fa;
    --svq-ink:        #14243b;
    --svq-ink-soft:   #4a5a70;
    --svq-ink-mute:   #7a8798;
    --svq-line:       #e4eaf2;

    --svq-accent:     #125bc9;
    --svq-accent-strong:#0f4ea8;
    --svq-accent-tint:#eaf1fc;

    /* Estados (semánticos, tenues) */
    --svq-new-bg:     #eaf1fc; --svq-new-ink:   #0f4ea8;   /* nueva solicitud → azul marca */
    --svq-ok-bg:      #e7f6ec; --svq-ok-ink:    #1a7a3d;   /* aceptado/completado → verde */
    --svq-wait-bg:    #fff4e2; --svq-wait-ink:  #a4610d;   /* pendiente → ámbar */
    --svq-off-bg:     #fdecec; --svq-off-ink:   #b23636;   /* rechazado/expirado → rojo */

    --svq-s2:8px; --svq-s3:12px; --svq-s4:16px; --svq-s5:20px; --svq-s6:24px;
    --svq-s8:32px; --svq-s10:40px; --svq-s12:48px;
    --svq-radius:16px; --svq-radius-sm:11px;
    --svq-ease: cubic-bezier(.22,.61,.36,1);

    color: var(--svq-ink);
    max-width: 100%;
}
.svq *, .svq *::before, .svq *::after { box-sizing: border-box; }

/* Volver */
.svq__back {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: .92rem; color: var(--svq-ink-soft);
    text-decoration: none; margin: 0 0 var(--svq-s6);
    transition: color .16s var(--svq-ease), gap .16s var(--svq-ease);
}
.svq__back svg { width: 16px; height: 16px; }
.svq__back:hover { color: var(--svq-accent); gap: 11px; }

/* ---- Cabecera: nº + fecha + badge de estado ---- */
.svq__head {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: var(--svq-s5);
    padding-bottom: var(--svq-s6); margin-bottom: var(--svq-s8);
    border-bottom: 1px solid var(--svq-line);
}
.svq__head-main { min-width: 0; }
.svq__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--svq-accent); margin-bottom: var(--svq-s3);
}
.svq__eyebrow svg { width: 16px; height: 16px; }
.svq__title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 var(--svq-s3); color: var(--svq-ink);
    overflow-wrap: anywhere; min-width: 0;
}
.svq__title span { color: var(--svq-accent); }
.svq__date { font-size: .95rem; color: var(--svq-ink-mute); display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.svq__date svg { width: 15px; height: 15px; }

.svq__status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .9rem;
    line-height: 1.25; white-space: normal; max-width: 320px;
    background: var(--svq-new-bg); color: var(--svq-new-ink);
}
.svq__status svg { width: 17px; height: 17px; flex: 0 0 auto; }
.svq--status-ok  .svq__status { background: var(--svq-ok-bg);   color: var(--svq-ok-ink); }
.svq--status-wait .svq__status{ background: var(--svq-wait-bg); color: var(--svq-wait-ink); }
.svq--status-off .svq__status { background: var(--svq-off-bg);  color: var(--svq-off-ink); }
.svq__pdf {
    display: inline-flex; align-items: center; gap: 7px; margin-top: var(--svq-s3);
    font-weight: 600; font-size: .9rem; color: var(--svq-accent); text-decoration: none;
}
.svq__pdf svg { width: 16px; height: 16px; }
.svq__pdf:hover { color: var(--svq-accent-strong); }

/* ---- Tarjeta genérica ---- */
.svq-card {
    background: var(--svq-paper); border: 1px solid var(--svq-line);
    border-radius: var(--svq-radius); padding: var(--svq-s8);
    margin-bottom: var(--svq-s6);
}
.svq-card__title {
    display: flex; align-items: center; gap: var(--svq-s3);
    font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
    color: var(--svq-ink); margin: 0 0 var(--svq-s6);
    padding-bottom: var(--svq-s5); border-bottom: 1px solid var(--svq-line);
}
.svq-card__title .svq-ico {
    flex: 0 0 auto; display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--svq-accent-tint); color: var(--svq-accent);
}
.svq-card__title .svq-ico svg { width: 19px; height: 19px; }

/* ---- Lista de productos ---- */
.svq-items { display: flex; flex-direction: column; gap: var(--svq-s4); margin: 0; padding: 0; list-style: none; }
.svq .svq-items .svq-item {
    /* Flex con altura mínima fija: la fila siempre mide lo mismo y los 3 bloques
       se centran en vertical de forma idéntica, tenga o no variación.
       padding con !important: el tema padre forzaba `padding-top:0` en los <li>
       (regla .woocommerce ul li), lo que descuadraba la imagen hacia arriba. */
    display: flex; align-items: center; gap: var(--svq-s5);
    min-height: 68px;
    padding: var(--svq-s4) !important; margin: 0 !important;
    list-style: none !important;
    background: var(--svq-paper-2); border: 1px solid var(--svq-line);
    border-radius: var(--svq-radius-sm);
}
.svq-item__thumb {
    align-self: center;
    width: 68px; height: 68px; border-radius: 10px; overflow: hidden;
    background: var(--svq-paper-3); display: grid; place-items: center; flex: 0 0 auto;
}
.svq-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.svq-item__thumb svg { width: 26px; height: 26px; color: var(--svq-accent); opacity: .5; }
/* El cuerpo ocupa el espacio central; nombre + variación apilados y centrados. */
.svq-item__body { flex: 1 1 auto; min-width: 0; align-self: center; }
.svq-item__name { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--svq-ink); }
.svq-item__name a { color: var(--svq-ink); text-decoration: none; }
.svq-item__name a:hover { color: var(--svq-accent); }
.svq-item__meta {
    display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 7px;
    font-size: .82rem; color: var(--svq-ink-soft);
}
.svq-item__meta .svq-chip {
    background: var(--svq-paper-3); border-radius: 999px; padding: 3px 10px;
    color: var(--svq-ink-soft);
}
.svq-item__meta .svq-chip strong { color: var(--svq-ink); font-weight: 600; }
/* WooCommerce mete la meta de variación como <ul class="wc-item-meta"><li>;
   la aplanamos a chips sin bullet. */
.svq-item__meta ul.wc-item-meta {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.svq-item__meta ul.wc-item-meta li {
    list-style: none !important; margin: 0 !important; padding: 3px 10px;
    background: var(--svq-paper-3); border-radius: 999px;
    display: inline-flex; align-items: baseline; gap: 5px;
    font-size: .82rem; color: var(--svq-ink-soft);
}
.svq-item__meta ul.wc-item-meta li::marker { content: "" !important; }
.svq-item__meta ul.wc-item-meta .wc-item-meta-label { font-weight: 600; color: var(--svq-ink); }
.svq-item__meta ul.wc-item-meta li p { display: inline; margin: 0; }
/* variante <dl> (por compatibilidad con otras plantillas) */
.svq-item__meta dl.variation { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; list-style: none; }
.svq-item__meta dl.variation dt, .svq-item__meta dl.variation dd { margin: 0; display: inline; font-size: .82rem; }
.svq-item__meta dl.variation dt { font-weight: 600; color: var(--svq-ink); }
.svq-item__meta dl.variation dd { color: var(--svq-ink-soft); margin-right: 8px; }
.svq-item__meta dl.variation dd p { display: inline; margin: 0; }
.svq-item__qty {
    flex: 0 0 auto; margin-left: auto;
    background: var(--svq-accent); color: #fff; font-weight: 700; font-size: .82rem;
    border-radius: 999px; padding: 5px 13px; white-space: nowrap;
}
.svq-item__total { flex: 0 0 auto; margin-left: auto; font-weight: 700; color: var(--svq-ink); white-space: nowrap; }

/* Totales del pie de tabla */
.svq-totals { margin-top: var(--svq-s5); border-top: 1px dashed var(--svq-line); padding-top: var(--svq-s5); }
.svq-totals__row { display: flex; justify-content: space-between; gap: var(--svq-s5); padding: 6px 0; font-size: .95rem; color: var(--svq-ink-soft); }
.svq-totals__row strong { color: var(--svq-ink); }
.svq-totals__row--grand { font-size: 1.1rem; color: var(--svq-ink); font-weight: 700; border-top: 1px solid var(--svq-line); margin-top: 6px; padding-top: var(--svq-s4); }

/* Botones de acción (aceptar/rechazar) */
.svq-actions { display: flex; flex-wrap: wrap; gap: var(--svq-s3); margin-top: var(--svq-s6); }
.svq-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: background .16s var(--svq-ease), transform .16s var(--svq-ease), border-color .16s;
}
.svq-btn svg { width: 17px; height: 17px; }
.svq-btn--accept { background: var(--svq-accent); color: #fff; }
.svq-btn--accept:hover { background: var(--svq-accent-strong); transform: translateY(-1px); color:#fff; }
.svq-btn--reject { background: transparent; color: var(--svq-off-ink); border-color: var(--svq-line); }
.svq-btn--reject:hover { border-color: var(--svq-off-ink); background: var(--svq-off-bg); }
.svq-btn:focus-visible { outline: 2px solid var(--svq-accent); outline-offset: 2px; }

/* ---- Grid inferior: cliente + mensaje + respuesta ---- */
.svq-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--svq-s6); }
.svq-grid--single { grid-template-columns: minmax(0,1fr); }
.svq-grid .svq-card { margin-bottom: 0; }

/* Datos de cliente en filas alineadas */
.svq-info { display: flex; flex-direction: column; gap: var(--svq-s4); }
.svq-info__row { display: flex; align-items: flex-start; gap: var(--svq-s4); }
.svq-info__ico {
    flex: 0 0 auto; display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--svq-paper-2); color: var(--svq-accent);
}
.svq-info__ico svg { width: 17px; height: 17px; }
.svq-info__label { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--svq-ink-mute); }
.svq-info__value { font-size: .98rem; color: var(--svq-ink); word-break: break-word; }
.svq-info__value a { color: var(--svq-accent); text-decoration: none; }

/* Mensaje del cliente */
.svq-message {
    background: var(--svq-paper-2); border: 1px solid var(--svq-line);
    border-radius: var(--svq-radius-sm); padding: var(--svq-s5);
    font-size: 1rem; line-height: 1.6; color: var(--svq-ink);
}

/* Respuesta de Singladura (color de MARCA, no rosa de alerta) */
.svq-reply {
    background: linear-gradient(180deg, var(--svq-accent-tint), #fff);
    border: 1px solid var(--svq-accent-tint);
    border-left: 4px solid var(--svq-accent);
    border-radius: var(--svq-radius);
    padding: var(--svq-s8);
}
.svq-reply .svq-card__title { border-bottom-color: #d7e5fa; }
.svq-reply__body { font-size: 1rem; line-height: 1.7; color: var(--svq-ink-soft); }
.svq-reply__body p { margin: 0 0 var(--svq-s4); }
.svq-reply__body p:last-child { margin-bottom: 0; }
.svq-reply__sign { margin-top: var(--svq-s5); padding-top: var(--svq-s5); border-top: 1px solid #d7e5fa;
    display: flex; align-items: center; gap: var(--svq-s3); }
.svq-reply__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--svq-accent);
    display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.svq-reply__avatar svg { width: 20px; height: 20px; }
.svq-reply__sign-name { font-weight: 700; color: var(--svq-ink); font-size: .95rem; }
.svq-reply__sign-role { font-size: .82rem; color: var(--svq-ink-mute); }

/* Mensaje "no existe / sin permiso" */
.svq-empty { padding: var(--svq-s10); text-align: center; color: var(--svq-ink-soft);
    background: var(--svq-paper-2); border: 1px solid var(--svq-line); border-radius: var(--svq-radius); }

/* ============================================================
   LISTA DE PRESUPUESTOS (my-quotes) — tarjetas
   ============================================================ */
.svq-list { display: flex; flex-direction: column; gap: var(--svq-s4); margin: var(--svq-s6) 0 0; }
.svq-qcard {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto;
    align-items: center; gap: var(--svq-s6);
    padding: var(--svq-s5) var(--svq-s6);
    background: var(--svq-paper); border: 1px solid var(--svq-line);
    border-radius: var(--svq-radius); text-decoration: none; color: var(--svq-ink);
    transition: border-color .16s var(--svq-ease), box-shadow .16s var(--svq-ease), transform .16s var(--svq-ease);
}
.svq-qcard:hover { border-color: var(--svq-accent); box-shadow: 0 6px 18px -10px rgba(18,91,201,.35); transform: translateY(-1px); }
.svq-qcard__icon {
    flex: 0 0 auto; display: inline-grid; place-items: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--svq-accent-tint); color: var(--svq-accent);
}
.svq-qcard__icon svg { width: 22px; height: 22px; }
.svq-qcard__main { min-width: 0; }
.svq-qcard__num { font-weight: 700; font-size: 1.05rem; color: var(--svq-ink); }
.svq-qcard__num span { color: var(--svq-accent); }
.svq-qcard__date { font-size: .85rem; color: var(--svq-ink-mute); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.svq-qcard__date svg { width: 14px; height: 14px; }
.svq-qcard__total { font-weight: 700; color: var(--svq-ink); white-space: nowrap; text-align: right; }
.svq-qcard__total small { display: block; font-weight: 600; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--svq-ink-mute); }
.svq-qcard__status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: .82rem;
    line-height: 1.25; background: var(--svq-new-bg); color: var(--svq-new-ink);
    max-width: 240px; text-align: left;
}
.svq-qcard__status svg { flex: 0 0 auto; }
.svq-qcard__status svg { width: 15px; height: 15px; }
.svq-qcard.svq--status-ok   .svq-qcard__status { background: var(--svq-ok-bg);   color: var(--svq-ok-ink); }
.svq-qcard.svq--status-wait .svq-qcard__status { background: var(--svq-wait-bg); color: var(--svq-wait-ink); }
.svq-qcard.svq--status-off  .svq-qcard__status { background: var(--svq-off-bg);  color: var(--svq-off-ink); }
.svq-qcard__go { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: var(--svq-paper-2); color: var(--svq-accent); transition: background .16s, transform .16s; }
.svq-qcard__go svg { width: 17px; height: 17px; }
.svq-qcard:hover .svq-qcard__go { background: var(--svq-accent); color: #fff; transform: translateX(3px); }

.svq-list-empty { padding: var(--svq-s12); text-align: center; color: var(--svq-ink-soft);
    background: var(--svq-paper-2); border: 1px dashed var(--svq-line); border-radius: var(--svq-radius); margin-top: var(--svq-s6); }
.svq-list-empty__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--svq-s4);
    border-radius: 14px; background: var(--svq-accent-tint); color: var(--svq-accent); }
.svq-list-empty__icon svg { width: 28px; height: 28px; }
.svq-list-empty a { color: var(--svq-accent); font-weight: 600; }

@media (max-width: 640px) {
    .svq-qcard { grid-template-columns: auto 1fr auto; grid-template-areas: "icon main go" "total total total"; gap: var(--svq-s3) var(--svq-s5); }
    .svq-qcard__icon { grid-area: icon; }
    .svq-qcard__main { grid-area: main; }
    .svq-qcard__go { grid-area: go; }
    .svq-qcard__total { grid-area: total; text-align: left; align-self: center; }
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .svq-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 560px) {
    .svq__head { flex-direction: column; }
    .svq-card { padding: var(--svq-s6); }
    /* Móvil: thumb + nombre en la 1ª línea; el badge/total baja a la 2ª (wrap). */
    .svq-item { flex-wrap: wrap; align-items: center; row-gap: var(--svq-s3); }
    .svq-item__thumb { width: 54px; height: 54px; }
    .svq-item__body { flex: 1 1 60%; }
    /* El badge/total salta a su propia línea (order 3 + basis 100% empuja el
       wrap) pero se mantiene compacto (max-content), alineado a la izquierda. */
    .svq-item__qty, .svq-item__total {
        order: 3; margin-left: 0; flex: 0 0 100%;
        max-width: max-content; align-self: flex-start;
    }
    .svq-reply, .svq-card { padding: var(--svq-s6); }
    /* Variación en móvil: texto plano (sin píldora, que se rompía en 2 líneas). */
    .svq-item__meta ul.wc-item-meta li {
        display: block; padding: 0; background: transparent; line-height: 1.5;
    }
    .svq-item__meta ul.wc-item-meta .wc-item-meta-label { display: inline; }
    .svq-item__meta ul.wc-item-meta li p { display: inline; }
}