/**
 * AcademiaPress — Sistema de Diseño
 * Tokens, reset, tipografía y layout base.
 * Filosofía: Fintech-Minimalist + Mentor Premium.
 */

/* ═══ 1. CUSTOM PROPERTIES ═══ */

:root {
    --ap-bg-dark:           #131218;
    --ap-accent:            #DCA54A;
    --ap-accent-soft:       #DFB77A;
    --ap-accent-glow:       rgba(220, 165, 74, 0.15);
    --ap-surface-light:     #F6F1EA;
    --ap-surface-white:     #FFFFFF;
    --ap-surface-dark:      #1B1A22;
    --ap-text-main:         #17151C;
    --ap-text-soft:         #6F6B76;
    --ap-text-invert:       #F7F4EF;
    --ap-text-invert-soft:  rgba(247, 244, 239, 0.6);
    --ap-border-light:      #E7DECF;
    --ap-border-dark:       rgba(220, 165, 74, 0.22);
    --ap-success:           #24A148;
    --ap-warning:           #F1B84B;
    --ap-error:             #D64545;

    --ap-font-heading:      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ap-font-body:         ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ap-text-xs:           0.75rem;
    --ap-text-sm:           0.875rem;
    --ap-text-base:         1rem;
    --ap-text-lg:           1.125rem;
    --ap-text-xl:           1.25rem;
    --ap-text-2xl:          1.5rem;
    --ap-text-3xl:          1.875rem;
    --ap-text-4xl:          2.25rem;
    --ap-leading-tight:     1.25;
    --ap-leading-normal:    1.5;
    --ap-leading-relaxed:   1.65;

    --ap-space-xs:          0.25rem;
    --ap-space-sm:          0.5rem;
    --ap-space-md:          1rem;
    --ap-space-lg:          1.5rem;
    --ap-space-xl:          2rem;
    --ap-space-2xl:         3rem;
    --ap-space-3xl:         4rem;

    --ap-radius-sm:         4px;
    --ap-radius-md:         8px;
    --ap-radius-lg:         12px;
    --ap-radius-xl:         16px;
    --ap-radius-full:       9999px;

    --ap-shadow-sm:         0 1px 3px rgba(19, 18, 24, 0.04);
    --ap-shadow-md:         0 4px 12px rgba(19, 18, 24, 0.06);
    --ap-shadow-lg:         0 10px 30px rgba(19, 18, 24, 0.06);
    --ap-shadow-card:       0 10px 30px rgba(19, 18, 24, 0.06);

    --ap-transition-fast:   150ms ease;
    --ap-transition-base:   200ms ease;
    --ap-transition-slow:   300ms ease;

    --ap-sidebar-width:     320px;
    --ap-panel-width:       320px;
    --ap-content-max:       900px;
}

/* ═══ 2. RESET ═══ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body.academiapress-page { font-family: var(--ap-font-body); font-size: var(--ap-text-base); line-height: var(--ap-leading-normal); color: var(--ap-text-main); background-color: var(--ap-surface-light); overflow-x: hidden; }
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* ═══ 3. TIPOGRAFÍA ═══ */

h1, h2, h3, h4, h5, h6, .ap-h1, .ap-h2, .ap-h3 {
    font-family: var(--ap-font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ap-text-main);
    margin: 0 0 var(--ap-space-md) 0;
    letter-spacing: -0.02em;
}
.ap-h1 { font-size: var(--ap-text-4xl); letter-spacing: -0.02em; }
.ap-h2 { font-size: var(--ap-text-2xl); letter-spacing: -0.01em; }
.ap-h3 { font-size: var(--ap-text-xl); }
.ap-dark .ap-h1, .ap-dark .ap-h2, .ap-dark .ap-h3 { color: var(--ap-text-invert); }
.ap-body { font-family: var(--ap-font-body); font-size: var(--ap-text-base); line-height: var(--ap-leading-relaxed); color: var(--ap-text-main); }
.ap-body--small { font-size: var(--ap-text-sm); }
.ap-body--muted { color: var(--ap-text-soft); }
.ap-label { font-family: var(--ap-font-body); font-size: var(--ap-text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ap-text-soft); }

/* ═══ 4. LAYOUT ═══ */

.ap-layout { display: flex; min-height: 100vh; width: 100%; }

.ap-sidebar {
    width: var(--ap-sidebar-width); min-height: 100vh; background-color: var(--ap-bg-dark);
    color: var(--ap-text-invert); flex-shrink: 0; position: fixed; left: 0; top: 0; bottom: 0;
    overflow-y: auto; z-index: 100; transition: transform var(--ap-transition-slow);
}

.ap-content { flex: 1; margin-left: var(--ap-sidebar-width); min-height: 100vh; background-color: var(--ap-surface-light); }
.ap-content__inner { max-width: var(--ap-content-max); margin: 0 auto; padding: var(--ap-space-xl) var(--ap-space-2xl); }

.ap-panel {
    width: var(--ap-panel-width); min-height: 100vh; background-color: var(--ap-surface-light);
    border-left: 1px solid var(--ap-border-light); flex-shrink: 0; position: fixed;
    right: 0; top: 0; bottom: 0; overflow-y: auto; padding: var(--ap-space-xl) var(--ap-space-lg);
    z-index: 90; transition: transform var(--ap-transition-slow);
}
.ap-layout--with-panel .ap-content { margin-right: var(--ap-panel-width); }

/* ═══ 5. RESPONSIVE ═══ */

@media (max-width: 1280px) {
    .ap-panel { transform: translateX(100%); }
    .ap-panel--open { transform: translateX(0); }
    .ap-layout--with-panel .ap-content { margin-right: 0; }
}
@media (max-width: 1024px) {
    .ap-sidebar { transform: translateX(-100%); }
    .ap-sidebar--open { transform: translateX(0); }
    .ap-content { margin-left: 0; }
    .ap-content__inner { padding: var(--ap-space-lg) var(--ap-space-md); }
}
@media (max-width: 640px) {
    .ap-content__inner { padding: var(--ap-space-md); }
    .ap-h1 { font-size: var(--ap-text-2xl); }
    .ap-h2 { font-size: var(--ap-text-xl); }
}

/* ═══ SOPORTE PARA WP ADMIN BAR ═══ */
.admin-bar .ap-sidebar,
.admin-bar .ap-panel {
    top: 32px;
    min-height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar .ap-sidebar,
    .admin-bar .ap-panel {
        top: 46px;
        min-height: calc(100vh - 46px);
    }
}

/* ═══ 6. UTILIDADES ═══ */

.ap-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.ap-flex { display: flex; }
.ap-flex-col { flex-direction: column; }
.ap-items-center { align-items: center; }
.ap-justify-between { justify-content: space-between; }
.ap-gap-xs { gap: var(--ap-space-xs); }
.ap-gap-sm { gap: var(--ap-space-sm); }
.ap-gap-md { gap: var(--ap-space-md); }
.ap-gap-lg { gap: var(--ap-space-lg); }
.ap-mt-sm { margin-top: var(--ap-space-sm); }
.ap-mt-md { margin-top: var(--ap-space-md); }
.ap-mt-lg { margin-top: var(--ap-space-lg); }
.ap-mt-xl { margin-top: var(--ap-space-xl); }
.ap-mb-sm { margin-bottom: var(--ap-space-sm); }
.ap-mb-md { margin-bottom: var(--ap-space-md); }
.ap-mb-lg { margin-bottom: var(--ap-space-lg); }

.ap-overlay { display: none; position: fixed; inset: 0; background-color: rgba(19, 18, 24, 0.5); z-index: 80; backdrop-filter: blur(2px); }
.ap-overlay--visible { display: block; }