/*
 * Fácil Shop 7.0.0 — Postventa, soporte y fidelización.
 *
 * Todos los componentes usan grid flexible, min-width:0 y breakpoints por
 * ancho efectivo. Así se evita que tarjetas, menús o formularios se deformen
 * con escalado de Windows o pantallas de laptop.
 */
:root {
    --ps-purple: #423289;
    --ps-orange: #ed7425;
    --ps-ink: #1e293b;
    --ps-muted: #64748b;
    --ps-border: #e2e8f0;
    --ps-soft: #f8fafc;
    --ps-danger: #b91c1c;
    --ps-success: #15803d;
}

.ps-page-head,
.ps-section-head,
.knowledge-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ps-page-head h2,
.ps-section-head h3 { margin: .2rem 0 .35rem; color: var(--ps-ink); }
.ps-page-head p,
.ps-section-head p { margin: 0; color: var(--ps-muted); }

.ps-filter-bar,
.ps-admin-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .85rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--ps-border);
    border-radius: 1rem;
    background: #fff;
}
.ps-filter-bar label,
.ps-admin-filter label { min-width: min(100%, 210px); }

.ps-card-list,
.ps-admin-card-list,
.ps-notification-list { display: grid; gap: 1rem; }
.ps-ticket-card,
.ps-review-card,
.ps-notification,
.ps-empty {
    min-width: 0;
    border: 1px solid var(--ps-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
}
.ps-ticket-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.15rem;
}
.ps-ticket-main { min-width: 0; }
.ps-ticket-main h3 { margin: .55rem 0 .35rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.ps-ticket-main h3 a { color: var(--ps-ink); text-decoration: none; }
.ps-ticket-main p { margin: 0; color: var(--ps-muted); }
.ps-ticket-code { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ps-ticket-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 1.25rem; margin: 0; }
.ps-ticket-stats div { min-width: 95px; }
.ps-ticket-stats dt,
.ps-summary-card dt { color: var(--ps-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.ps-ticket-stats dd,
.ps-summary-card dd { margin: .3rem 0 0; color: var(--ps-ink); font-weight: 700; }
.ps-empty { padding: 2rem; text-align: center; grid-column: 1 / -1; }
.ps-empty p { color: var(--ps-muted); }

.ps-help-grid,
.ps-ticket-detail-grid,
.ps-admin-ticket-grid,
.ps-article-form {
    display: grid;
    grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.ps-ticket-detail-grid,
.ps-admin-ticket-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.ps-article-form { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.ps-guide-card,
.ps-form-card,
.ps-reply-card,
.ps-summary-card {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--ps-border);
    border-radius: 1rem;
    background: #fff;
}
.ps-guide-card { position: sticky; top: 92px; background: linear-gradient(145deg, #f4f1ff, #fff7ed); }
.ps-guide-card h3,
.ps-summary-card h3 { margin-top: 0; }
.ps-guide-card li { margin-bottom: .65rem; color: var(--ps-ink); }
.ps-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ps-span-2 { grid-column: 1 / -1; }
.ps-field,
.ps-file-field { display: grid; gap: .42rem; min-width: 0; }
.ps-field > span,
.ps-file-field > span { font-weight: 700; color: var(--ps-ink); }
.ps-field input,
.ps-field select,
.ps-field textarea,
.ps-file-field input,
.ps-inline-note textarea,
.ps-inline-note input {
    width: 100%; min-width: 0; box-sizing: border-box;
    border: 1px solid #cbd5e1; border-radius: .7rem; padding: .75rem .85rem;
    background: #fff; color: var(--ps-ink); font: inherit;
}
.ps-field textarea { resize: vertical; line-height: 1.55; }
.ps-field small,
.ps-file-field small { color: var(--ps-muted); }
.ps-form-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.2rem; flex-wrap: wrap; }
.ps-check-row { display: flex !important; align-items: flex-start; gap: .65rem; min-width: 0 !important; }
.ps-check-row input { flex: 0 0 auto; margin-top: .25rem; }
.ps-check-row span { display: grid; gap: .18rem; min-width: 0; }
.ps-check-row small { color: var(--ps-muted); }

.ps-conversation { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.ps-message { max-width: 88%; padding: 1rem; border-radius: 1rem; border: 1px solid var(--ps-border); background: #fff; }
.ps-message.is-customer { justify-self: end; background: #f4f1ff; border-color: #d9d1fb; }
.ps-message.is-agent { justify-self: start; background: #fff7ed; border-color: #fed7aa; }
.ps-message.is-internal { background: #fffbe6; border-style: dashed; }
.ps-message header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.ps-message header div { display: grid; gap: .1rem; }
.ps-message header small,
.ps-message header span { color: var(--ps-muted); font-size: .78rem; }
.ps-message-body { color: var(--ps-ink); line-height: 1.6; overflow-wrap: anywhere; }
.ps-attachment { display: inline-flex; margin-top: .8rem; color: var(--ps-purple); font-weight: 700; overflow-wrap: anywhere; }
.ps-side-stack { display: grid; gap: 1rem; min-width: 0; }
.ps-summary-card dl { display: grid; gap: .9rem; margin: 0; }
.ps-summary-card dl div { border-bottom: 1px solid var(--ps-border); padding-bottom: .75rem; }
.ps-summary-card dl div:last-child { border: 0; padding-bottom: 0; }
.ps-reply-card { display: grid; gap: 1rem; }

.ps-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.ps-stars input { position: absolute; opacity: 0; pointer-events: none; }
.ps-stars span { font-size: 1.75rem; color: #cbd5e1; cursor: pointer; }
.ps-stars label:hover span,
.ps-stars label:hover ~ label span,
.ps-stars input:checked ~ span,
.ps-stars label:has(input:checked) span,
.ps-stars label:has(input:checked) ~ label span { color: #f59e0b; }

.ps-review-card { padding: 1.25rem; display: grid; grid-template-columns: minmax(220px, .4fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ps-review-card form { display: grid; gap: .75rem; }
.ps-notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem; }
.ps-notification.is-unread { border-left: 4px solid var(--ps-orange); }
.ps-notification-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #f4f1ff; color: var(--ps-purple); font-weight: 900; }
.ps-notification h3 { margin: .15rem 0 .35rem; }
.ps-notification p { margin: 0 0 .4rem; color: var(--ps-muted); }

/* Centro de ayuda público */
.knowledge-page,
.knowledge-article-page { background: var(--ps-soft); min-height: 70vh; }
.knowledge-hero,
.knowledge-article-hero { padding: clamp(3rem, 7vw, 6rem) 0; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(237,116,37,.45), transparent 35%), linear-gradient(135deg, #2d205f, var(--ps-purple)); }
.knowledge-hero h1,
.knowledge-article-hero h1 { max-width: 900px; margin: .55rem 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; }
.knowledge-hero p,
.knowledge-article-hero p { max-width: 760px; color: rgba(255,255,255,.82); font-size: 1.08rem; }
.knowledge-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .32fr) auto; gap: .65rem; max-width: 900px; margin-top: 1.5rem; }
.knowledge-search input,
.knowledge-search select { min-width: 0; border: 0; border-radius: .75rem; padding: .9rem 1rem; font: inherit; }
.knowledge-content { padding-top: 2rem; padding-bottom: 4rem; }
.knowledge-layout { display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.knowledge-sidebar { position: sticky; top: 90px; display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--ps-border); border-radius: 1rem; background: #fff; }
.knowledge-sidebar h2 { margin: .25rem .6rem .75rem; }
.knowledge-sidebar a { padding: .75rem; border-radius: .65rem; color: var(--ps-ink); text-decoration: none; }
.knowledge-sidebar a:hover,
.knowledge-sidebar a.is-active { background: #f4f1ff; color: var(--ps-purple); font-weight: 700; }
.knowledge-support-link { margin-top: .75rem; border-top: 1px solid var(--ps-border); }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.knowledge-card { min-width: 0; padding: 1.2rem; border: 1px solid var(--ps-border); border-radius: 1rem; background: #fff; }
.knowledge-card > div,
.knowledge-card footer { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.knowledge-card > div span,
.knowledge-card > div b { font-size: .75rem; color: var(--ps-purple); }
.knowledge-card h3 { margin: .8rem 0 .55rem; }
.knowledge-card h3 a { color: var(--ps-ink); text-decoration: none; }
.knowledge-card p { color: var(--ps-muted); line-height: 1.55; }
.knowledge-card footer a { color: var(--ps-purple); font-weight: 700; }
.knowledge-article-hero a { color: #fff; }
.knowledge-article-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.knowledge-article-meta span { padding: .45rem .7rem; border-radius: 999px; background: rgba(255,255,255,.14); }
.knowledge-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: 1.5rem; padding-top: 2rem; padding-bottom: 4rem; align-items: start; }
.knowledge-article-body { padding: clamp(1.2rem, 4vw, 2.5rem); border: 1px solid var(--ps-border); border-radius: 1rem; background: #fff; overflow-wrap: anywhere; }
.knowledge-article-aside { position: sticky; top: 90px; display: grid; gap: 1rem; }
.knowledge-article-aside > div { padding: 1rem; border: 1px solid var(--ps-border); border-radius: 1rem; background: #fff; }
.knowledge-article-aside form { display: grid; gap: .55rem; }
.content-prose pre { max-width: 100%; overflow: auto; padding: 1rem; border-radius: .75rem; background: #111827; color: #f8fafc; }
.content-prose img { max-width: 100%; height: auto; }
.content-prose table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.content-prose th,
.content-prose td { padding: .65rem; border: 1px solid var(--ps-border); }

/* Administración */
.ps-admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ps-admin-kpis article { padding: 1rem; border: 1px solid var(--ps-border); border-radius: 1rem; background: #fff; }
.ps-admin-kpis article.is-alert { border-color: #fca5a5; background: #fef2f2; }
.ps-admin-kpis span,
.ps-admin-kpis small { display: block; color: var(--ps-muted); }
.ps-admin-kpis strong { display: block; margin: .35rem 0; font-size: 2rem; color: var(--ps-ink); }
.ps-admin-shortcuts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.ps-admin-shortcuts a { display: grid; gap: .2rem; padding: 1rem; border-radius: .85rem; background: linear-gradient(145deg, #423289, #2f236a); color: #fff; text-decoration: none; }
.ps-admin-shortcuts span { color: rgba(255,255,255,.75); font-size: .82rem; }
.ps-admin-form { display: grid; gap: 1rem; min-width: 0; }
.ps-admin-form h2 { margin: 0; }
.ps-admin-ticket-grid main { min-width: 0; }
.ps-sla-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ps-sla-title { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.ps-sla-title h2 { margin: .5rem 0 0; }
.ps-article-main { min-width: 0; }
.ps-renewal-admin-card,
.ps-review-admin-card { padding: 1.2rem; }
.ps-renewal-admin-card > header,
.ps-review-admin-card > header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.ps-renewal-admin-card h2,
.ps-review-admin-card h2 { margin: .45rem 0 .2rem; }
.ps-renewal-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.ps-renewal-detail div { padding: .75rem; border-radius: .75rem; background: var(--ps-soft); }
.ps-renewal-detail span,
.ps-renewal-detail strong { display: block; overflow-wrap: anywhere; }
.ps-renewal-detail span { color: var(--ps-muted); font-size: .75rem; }
.ps-renewal-actions,
.ps-review-actions { display: grid; grid-template-columns: minmax(160px, .3fr) minmax(180px, .35fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.ps-review-actions { grid-template-columns: minmax(160px, .25fr) minmax(0, 1fr) auto; }
.ps-review-admin-card blockquote { margin: 1rem 0; padding: 1rem; border-left: 4px solid var(--ps-purple); background: var(--ps-soft); }
.ps-health-score { display: flex; align-items: center; gap: .55rem; min-width: 110px; }
.ps-health-score > span { width: 70px; height: .45rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.ps-health-score i { display: block; height: 100%; background: linear-gradient(90deg, var(--ps-orange), var(--ps-purple)); }
.ps-inline-note { display: grid; gap: .35rem; min-width: 210px; }
.ps-inline-note textarea { resize: vertical; }
tr.is-overdue { background: #fff7f7; }
.text-danger { color: var(--ps-danger) !important; }
.button-block { width: 100%; justify-content: center; }

@media (max-width: 1360px) {
    .ps-admin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ps-admin-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ps-renewal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-renewal-actions .button { align-self: end; }
}
@media (max-width: 1100px) {
    .ps-help-grid,
    .ps-ticket-detail-grid,
    .ps-admin-ticket-grid,
    .ps-article-form,
    .knowledge-article-layout { grid-template-columns: 1fr; }
    .ps-guide-card,
    .knowledge-article-aside { position: static; }
    .ps-ticket-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ps-admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ps-sla-grid { grid-template-columns: 1fr; }
    .ps-renewal-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .knowledge-layout { grid-template-columns: 1fr; }
    .knowledge-sidebar { position: static; display: flex; overflow-x: auto; }
    .knowledge-sidebar h2 { display: none; }
    .knowledge-sidebar a { white-space: nowrap; }
    .knowledge-grid { grid-template-columns: 1fr; }
    .knowledge-search { grid-template-columns: 1fr; }
    .ps-ticket-card,
    .ps-review-card,
    .ps-notification { grid-template-columns: 1fr; align-items: start; }
    .ps-ticket-stats { width: 100%; }
    .ps-notification form { justify-self: start; }
    .ps-review-actions { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .ps-page-head,
    .ps-section-head,
    .ps-renewal-admin-card > header,
    .ps-review-admin-card > header { flex-direction: column; }
    .ps-form-grid,
    .ps-renewal-detail,
    .ps-renewal-actions { grid-template-columns: 1fr; }
    .ps-span-2 { grid-column: auto; }
    .ps-ticket-stats { grid-template-columns: 1fr; }
    .ps-message { max-width: 100%; }
    .ps-admin-kpis,
    .ps-admin-shortcuts { grid-template-columns: 1fr; }
    .ps-form-actions { justify-content: stretch; }
    .ps-form-actions .button { width: 100%; justify-content: center; }
}

/* Gestión de planes de renovación y editor de conocimiento. */
.ps-renewal-plan-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ps-renewal-plan-guide > div { padding: 1rem; border-radius: .85rem; background: var(--ps-soft); }
.ps-renewal-plan-guide strong,
.ps-renewal-plan-guide span { display: block; }
.ps-renewal-plan-guide span { margin-top: .35rem; color: var(--ps-muted); line-height: 1.5; }
.ps-renewal-plan-layout { display: grid; grid-template-columns: minmax(300px, .38fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ps-renewal-plan-layout > .panel { position: sticky; top: 88px; }
.ps-renewal-plan-list { display: grid; gap: 1rem; min-width: 0; }
.ps-renewal-plan-card > header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ps-renewal-plan-card h2 { margin: .45rem 0 .2rem; }
.ps-renewal-plan-card p { margin: 0; color: var(--ps-muted); }
.ps-quill-editor { min-height: 360px; background: #fff; }
.ps-quill-editor .ql-editor { min-height: 320px; font-size: 1rem; line-height: 1.65; }
.ps-quill-editor + small { display: block; margin-top: .45rem; }

/* Opiniones verificadas del producto. */
.premium-review-summary { display: grid; grid-template-columns: minmax(180px, .3fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.premium-review-score,
.premium-review-summary > div:first-child { display: grid; place-items: center; padding: 1.5rem; border-radius: 1rem; background: linear-gradient(145deg, #423289, #2f236a); color: #fff; text-align: center; }
.premium-review-score strong,
.premium-review-summary > div:first-child > strong { font-size: 3rem; line-height: 1; }
.premium-review-list { display: grid; gap: 1rem; margin-top: 1rem; }
.premium-review-list article { padding: 1.2rem; border: 1px solid var(--ps-border); border-radius: 1rem; background: #fff; }
.premium-review-list header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.premium-review-list blockquote { margin: 1rem 0 0; color: var(--ps-muted); line-height: 1.65; }
.premium-review-response { margin-top: 1rem; padding: .9rem; border-left: 4px solid var(--ps-orange); background: #fff7ed; }

@media (max-width: 1100px) {
    .ps-renewal-plan-guide { grid-template-columns: 1fr; }
    .ps-renewal-plan-layout { grid-template-columns: 1fr; }
    .ps-renewal-plan-layout > .panel { position: static; }
}
@media (max-width: 760px) {
    .premium-review-summary { grid-template-columns: 1fr; }
    .ps-renewal-plan-card > header,
    .premium-review-list header { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Customer Success: agenda de acciones pendiente y vencida.
   -------------------------------------------------------------------------- */
.ps-action-list{display:grid;gap:12px}.ps-action-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:16px;border:1px solid var(--border,#e8e3f2);border-radius:14px;background:#fff}.ps-action-item.is-overdue{border-color:#f4b4b4;background:#fff8f8}.ps-action-item>div:first-child{min-width:0}.ps-action-item strong,.ps-action-item small{display:block}.ps-action-item p{margin:8px 0;line-height:1.55;overflow-wrap:anywhere}.ps-action-item__meta{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px;white-space:nowrap}@media(max-width:850px){.ps-action-item{grid-template-columns:1fr}.ps-action-item__meta{align-items:flex-start;white-space:normal}}