/* Pantalla de planes — comparativa dinámica (plans.js), alimentada por
   plans.active_books_limit/price_cents/features_json. Reutiliza los
   tokens de app.css (--bg, --ink, --line...) y añade 4 acentos, uno por
   plan, con el mismo patrón de tema claro/oscuro/fijado a mano que ya
   usa app.css. */

:root {
    --plan-free:    #4b7d55;
    --plan-premium: var(--accent);
    --plan-pro:     #6b4fa0;
    --plan-studio:  #3f6ea3;
}
@media (prefers-color-scheme: dark) {
    :root {
        --plan-free:    #86b98f;
        --plan-pro:     #b39ce0;
        --plan-studio:  #8fb6e0;
    }
}
:root[data-theme="dark"] {
    --plan-free:    #86b98f;
    --plan-pro:     #b39ce0;
    --plan-studio:  #8fb6e0;
}
:root[data-theme="light"] {
    --plan-free:    #4b7d55;
    --plan-pro:     #6b4fa0;
    --plan-studio:  #3f6ea3;
}

.plans-head { text-align: center; }
.plans-head h1 { max-width: 720px; margin: 0 auto 8px; }
.plans-head p { color: var(--ink-soft); }

#plans-table { overflow-x: auto; padding-bottom: 8px; }

.plans-grid {
    display: grid;
    grid-template-columns: minmax(190px, 240px) repeat(var(--plan-cols, 4), minmax(160px, 1fr));
    column-gap: 10px;
    row-gap: 0;
    min-width: 780px;
}

.plans-corner { position: sticky; top: 0; }

/* --- cabecera de cada plan ------------------------------------------ */
.plan-header {
    padding: 20px 16px 18px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-bottom: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.plan-header.accent-free    { box-shadow: inset 0 3px 0 var(--plan-free); }
.plan-header.accent-premium { box-shadow: inset 0 3px 0 var(--plan-premium); }
.plan-header.accent-pro     { box-shadow: inset 0 3px 0 var(--plan-pro); }
.plan-header.accent-studio  { box-shadow: inset 0 3px 0 var(--plan-studio); }
.plan-header.is-current-plan { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; }

.plan-name { font-family: var(--serif); font-size: 1.05rem; }
.plan-badge { font-size: .9rem; }
.plan-price { font-size: 1.7rem; font-weight: 700; margin-top: 2px; }
.plan-price.plan-price-beta { font-size: .92rem; font-weight: 500; color: var(--ink-faint); min-height: 1.6em; display: flex; align-items: center; }
.plan-period { font-size: .78rem; font-weight: 400; color: var(--ink-faint); margin-left: 2px; }
.plan-tagline { margin: 0; font-size: .8rem; color: var(--ink-soft); min-height: 2.2em; }
.plan-books-pill {
    font-size: .74rem; font-weight: 600; letter-spacing: .02em;
    padding: 4px 12px; border-radius: 999px;
    background: var(--accent-soft); color: var(--ink);
    margin: 4px 0 8px;
}
.plan-btn { width: 100%; }
.plan-btn.is-current { opacity: .6; cursor: default; }
.plan-btn:disabled { opacity: .55; cursor: default; }

/* --- categorías -------------------------------------------------------- */
.cat-header {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 8px;
    margin: 22px 0 4px; padding: 6px 4px;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}
.cat-header svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

/* --- filas de función --------------------------------------------------- */
.row-label {
    display: flex; align-items: center;
    padding: 9px 10px;
    font-size: .84rem; color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}
.row-cell {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 9px 8px;
    text-align: center;
    font-size: .82rem;
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: var(--bg-raised);
}
.row-cell.accent-free    { background: color-mix(in srgb, var(--plan-free) 6%, var(--bg-raised)); }
.row-cell.accent-premium { background: color-mix(in srgb, var(--plan-premium) 7%, var(--bg-raised)); }
.row-cell.accent-pro     { background: color-mix(in srgb, var(--plan-pro) 6%, var(--bg-raised)); }
.row-cell.accent-studio  { background: color-mix(in srgb, var(--plan-studio) 6%, var(--bg-raised)); }

.cell-dash { color: var(--ink-faint); }
.cell-text { color: var(--ink-soft); }
.cell-note { color: var(--ink); font-weight: 600; }
.cell-check { width: 17px; height: 17px; flex: none; color: var(--ok); }

.plans-footnote { margin: 18px 4px 0; font-size: .76rem; color: var(--ink-faint); text-align: center; }

@media (max-width: 720px) {
    .plans-grid { min-width: 900px; }
}

/* --- consentimiento previo al pago (#dlg-checkout-consent) --- */
#dlg-checkout-consent { max-width: 540px; }
#dlg-checkout-consent h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.consent-summary { margin: 0 0 8px; font-size: 1rem; }
.consent-note { margin: 0 0 14px; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.consent-check {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px;
    font-size: .9rem; line-height: 1.45;
}
.consent-check input { margin: 3px 0 0; flex: none; }
.consent-check a { color: var(--accent); }
.consent-email { margin: 12px 0 0; }