/* Pastor Eduardo Gutiérrez — site styles */
:root {
    --color-bg: #faf7f2;
    --color-bg-alt: #f3ede2;
    --color-card: #ffffff;
    --color-text: #1f1815;
    --color-text-soft: #6b5d51;
    --color-muted: #8a7f74;
    --color-accent: #7c1d1d;
    --color-accent-hover: #5e1414;
    --color-gold: #b8893a;
    --color-gold-soft: #ddc28b;
    --color-success: #1f6f4a;
    --color-warn: #b86a1d;
    --color-danger: #a82929;
    --color-border: #e6dcca;
    --shadow-card: 0 4px 18px rgba(76, 53, 30, 0.08);
    --shadow-elevated: 0 10px 40px rgba(76, 53, 30, 0.15);
    --radius: 12px;
    --radius-sm: 6px;
    --font-serif: "Georgia", "Cambria", "Times New Roman", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.6;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    margin-top: 0;
}
h1 { font-size: 2.4rem; margin-bottom: 0.4em; }
h2 { font-size: 1.8rem; margin-bottom: 0.6em; }
h3 { font-size: 1.3rem; margin-bottom: 0.5em; }

p { margin: 0 0 1em; }

.pe-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.pe-narrow { max-width: 760px; }
.pe-muted { color: var(--color-text-soft); }
.pe-tiny { font-size: 0.82rem; color: var(--color-muted); }

/* Header */
.pe-header {
    background: linear-gradient(135deg, #2a1310 0%, #4a1f1a 60%, #6b2920 100%);
    color: #fff;
    padding: 18px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.pe-header a { color: #fff; }
.pe-header a:hover { color: var(--color-gold-soft); text-decoration: none; }
.pe-header-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pe-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; }
.pe-brand-mark { display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; background: var(--color-gold); color: #1a0808; border-radius: 50%; font-size: 1.4rem; }
.pe-brand-text { letter-spacing: 0.02em; }
.pe-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.pe-nav a { font-weight: 500; }

/* Hero */
.pe-hero {
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    padding: 80px 0;
    border-bottom: 1px solid var(--color-border);
}
.pe-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pe-kicker { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; font-weight: 700; color: var(--color-gold); margin-bottom: 12px; }
.pe-hero-text h1 { font-size: 3rem; line-height: 1.05; margin-bottom: 16px; color: #2a1310; }
.pe-tagline { font-size: 1.25rem; color: var(--color-text-soft); margin-bottom: 18px; font-style: italic; }
.pe-hero-lede { font-size: 1.05rem; max-width: 540px; margin-bottom: 28px; }
.pe-hero-card {
    background: var(--color-card);
    border: 1px solid var(--color-gold-soft);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    position: relative;
}
.pe-hero-card::before {
    content: "";
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: calc(var(--radius) + 3px);
    border: 1px solid var(--color-gold-soft);
    opacity: 0.4;
    pointer-events: none;
}
.pe-hero-card blockquote { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.5; color: var(--color-text); margin: 0 0 18px; font-style: italic; }
.pe-hero-card cite { color: var(--color-gold); font-weight: 700; font-style: normal; }

/* Search section */
.pe-search-section { padding: 70px 0; background: var(--color-card); }
.pe-search-section h2 { font-size: 2rem; }
.pe-search-form {
    display: flex;
    gap: 12px;
    margin: 24px 0 16px;
    max-width: 720px;
}
.pe-search-form input[type="text"] {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1.05rem;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s;
}
.pe-search-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-accent);
    background: #fff;
}

.pe-search-status { margin: 12px 0 16px; min-height: 20px; }
.pe-search-status.is-loading::before { content: "Buscando libros…"; color: var(--color-muted); font-style: italic; }
.pe-search-status.is-error { color: var(--color-danger); font-weight: 500; }
.pe-search-status.is-empty { color: var(--color-text-soft); }

.pe-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.pe-book-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}
.pe-book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
.pe-book-card.is-selected { border-color: var(--color-accent); background: #fff8f0; }
.pe-book-card h3 { font-size: 1.15rem; margin: 0; color: var(--color-accent); }
.pe-book-card p { font-size: 0.95rem; color: var(--color-text-soft); margin: 0; flex: 1; }
.pe-book-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.pe-book-price { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--color-gold); }
.pe-book-card label { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-weight: 500; }
.pe-book-card input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-accent); cursor: pointer; }

/* Cart section */
.pe-cart-section { padding: 60px 0; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); }
.pe-cart-summary { background: var(--color-card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); margin-bottom: 24px; }
.pe-cart-list { list-style: none; margin: 0; padding: 0; }
.pe-cart-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.pe-cart-list li:last-child { border-bottom: none; }
.pe-cart-list strong { font-family: var(--font-serif); }
.pe-cart-total { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 12px; border-top: 2px solid var(--color-text); font-size: 1.3rem; font-weight: 700; }
.pe-cart-total .pe-price { color: var(--color-accent); font-family: var(--font-serif); }

.pe-checkout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.pe-checkout-info { background: #fff8f0; border-left: 4px solid var(--color-gold); padding: 20px 22px; border-radius: var(--radius-sm); }
.pe-paypal-container { background: var(--color-card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); min-height: 60px; }
.pe-paypal-container .pe-muted { font-size: 0.95rem; }

/* Buttons */
.pe-btn {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: 13px 28px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    letter-spacing: 0.02em;
}
.pe-btn:hover { background: var(--color-accent-hover); color: #fff; text-decoration: none; }
.pe-btn:active { transform: translateY(1px); }
.pe-btn-secondary { background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); padding: 11px 26px; }
.pe-btn-secondary:hover { background: var(--color-accent); color: #fff; }
.pe-btn-danger { background: var(--color-danger); }
.pe-btn-danger:hover { background: #861f1f; }

/* Forms */
.pe-field { margin-bottom: 18px; }
.pe-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.pe-field input[type="text"], .pe-field input[type="email"], .pe-field input[type="password"], .pe-field input[type="number"], .pe-field select, .pe-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 1rem;
    background: #fff;
    color: var(--color-text);
}
.pe-field textarea { font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 0.9rem; line-height: 1.5; resize: vertical; min-height: 200px; }
.pe-field input:focus, .pe-field select:focus, .pe-field textarea:focus { outline: none; border-color: var(--color-accent); }

.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pe-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px 24px 8px; margin: 0 0 24px; }
legend { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; padding: 0 8px; color: var(--color-accent); }

/* Card */
.pe-card { background: var(--color-card); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card); }
.pe-card h1 { font-size: 1.7rem; }

/* Pages */
.pe-page { padding: 60px 0; }
.pe-thanks-list { list-style: none; padding: 0; margin: 24px 0; }
.pe-thanks-list li { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pe-thanks-list .pe-price { font-family: var(--font-serif); font-weight: 700; color: var(--color-gold); }
.pe-thanks-info { margin-top: 24px; background: #f0f9f4; border-left: 4px solid var(--color-success); }
.pe-email-form { display: flex; gap: 12px; margin-top: 12px; }
.pe-email-form input[type="email"] { flex: 1; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem; }
.pe-email-form input[type="email"]:focus { outline: none; border-color: var(--color-accent); }

.pe-contact-email { font-size: 1.4rem; font-family: var(--font-serif); color: var(--color-accent); margin: 18px 0; }

/* Login */
.pe-login { padding: 80px 0; min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.pe-login-card { width: 100%; max-width: 420px; }

/* Install */
.pe-install { padding: 60px 0; max-width: 720px; margin: 0 auto; }

/* Admin */
.pe-admin { background: #f7f3ec; }
.pe-admin-header { background: linear-gradient(135deg, #2a1310 0%, #4a1f1a 100%); color: #fff; padding: 16px 0; }
.pe-admin-main { padding: 36px 0; }
.pe-admin-main h1 { margin-bottom: 20px; }
.pe-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 0 0 28px; }
.pe-stat { background: var(--color-card); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-card); }
.pe-stat h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin: 0 0 6px; font-family: var(--font-sans); }
.pe-stat p { font-size: 1.6rem; font-weight: 700; font-family: var(--font-serif); margin: 0; color: var(--color-text); }

.pe-table-card { background: var(--color-card); border-radius: var(--radius); padding: 0; box-shadow: var(--shadow-card); overflow: hidden; }
.pe-table-card table { width: 100%; border-collapse: collapse; }
.pe-table-card th, .pe-table-card td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; }
.pe-table-card th { background: var(--color-bg-alt); font-weight: 700; color: var(--color-text-soft); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pe-table-card tr:last-child td { border-bottom: none; }

.pe-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.pe-badge-success { background: #d6efe1; color: var(--color-success); }
.pe-badge-warn { background: #fdeace; color: var(--color-warn); }
.pe-badge-muted { background: #ece5d8; color: var(--color-muted); }
.pe-badge-danger { background: #f7d4d4; color: var(--color-danger); }

.pe-empty { background: var(--color-card); border-radius: var(--radius); padding: 40px 24px; text-align: center; color: var(--color-muted); }
.pe-code { background: #2a1310; color: #fbe9c5; padding: 12px 16px; border-radius: var(--radius-sm); font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 0.88rem; overflow-x: auto; margin: 8px 0; }

.pe-form fieldset { background: var(--color-card); }

.pe-flash { padding: 12px 16px; border-radius: var(--radius-sm); margin: 0 0 16px; font-weight: 500; }
.pe-flash-success { background: #d6efe1; color: var(--color-success); border-left: 4px solid var(--color-success); }
.pe-flash-error { background: #f7d4d4; color: var(--color-danger); border-left: 4px solid var(--color-danger); }
.pe-flash-info { background: #fdeace; color: var(--color-warn); border-left: 4px solid var(--color-warn); }

/* Footer */
.pe-footer { background: #2a1310; color: #d8c8a3; padding: 32px 0; margin-top: 60px; }
.pe-footer p { margin: 6px 0; }
.pe-footer-quote { font-style: italic; color: #b8893a; font-family: var(--font-serif); }

/* Responsive */
@media (max-width: 760px) {
    .pe-hero { padding: 50px 0; }
    .pe-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .pe-hero-text h1 { font-size: 2.2rem; }
    .pe-checkout { grid-template-columns: 1fr; }
    .pe-search-form { flex-direction: column; }
    .pe-grid { grid-template-columns: 1fr; }
    .pe-nav { gap: 14px; font-size: 0.92rem; }
    .pe-brand-text { font-size: 1.1rem; }
    .pe-email-form { flex-direction: column; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
}