/* =========================================================
   SOLOHAZLO — TEMA «NOCTURNO / MATUTINO»
   Se carga DESPUÉS de style.css. Contiene:
   01. Fuentes
   02. Variables de los dos temas
   03. Base (tipografía, fondo, transiciones)
   04. Encabezado + botón de tema
   05. Portada del inicio (hero con buscador)
   06. Catálogo de herramientas
   07. Secciones del inicio (categorías, acerca, cómo funciona)
   08. Páginas de herramienta
   09. Pie de página
   10. Responsive
   ========================================================= */

/* 01. FUENTES ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* 02. VARIABLES ========================================== */
:root {
    --sh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sh-display: 'Inter Tight', 'Inter Display', 'Inter', system-ui, sans-serif;
    --sh-mono: 'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono', monospace;

    /* Matutino (claro) */
    --sh-bg: #F7F5FC;
    --sh-surface: #FFFFFF;
    --sh-surface-2: #F1EEF9;
    --sh-line: rgba(20, 14, 48, 0.09);
    --sh-line-strong: rgba(20, 14, 48, 0.16);
    --sh-text: #17132A;
    --sh-muted: #5E5873;
    --sh-accent: #6A4DF0;
    --sh-accent-text: #5B3FE0;
    --sh-accent-2: #0E9EC2;
    --sh-grad-a: #6A4DF0;
    --sh-grad-b: #0E9EC2;
    --sh-btn: #6A4DF0;
    --sh-btn-hover: #5636E0;
    --sh-header: rgba(247, 245, 252, 0.82);
    --sh-glow-1: rgba(139, 108, 255, 0.20);
    --sh-glow-2: rgba(61, 214, 245, 0.18);
    --sh-shadow: 0 18px 44px -24px rgba(60, 40, 140, 0.28);
    --sh-shadow-hover: 0 24px 54px -26px rgba(60, 40, 140, 0.42);
    --sh-chip: rgba(255, 255, 255, 0.75);
    color-scheme: light;
}

:root[data-theme="dark"] {
    /* Nocturno (oscuro) */
    --sh-bg: #0C0A12;
    --sh-surface: #15121E;
    --sh-surface-2: #1C1828;
    --sh-line: rgba(255, 255, 255, 0.08);
    --sh-line-strong: rgba(255, 255, 255, 0.16);
    --sh-text: #F3F0FA;
    --sh-muted: #A9A2BC;
    --sh-accent: #8B6CFF;
    --sh-accent-text: #B9A7FF;
    --sh-accent-2: #3DD6F5;
    --sh-grad-a: #B9A7FF;
    --sh-grad-b: #3DD6F5;
    --sh-btn: #6A4DF0;
    --sh-btn-hover: #7B60FF;
    --sh-header: rgba(12, 10, 18, 0.74);
    --sh-glow-1: rgba(139, 108, 255, 0.26);
    --sh-glow-2: rgba(61, 214, 245, 0.14);
    --sh-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.7);
    --sh-shadow-hover: 0 26px 60px -24px rgba(0, 0, 0, 0.85);
    --sh-chip: rgba(255, 255, 255, 0.04);
    color-scheme: dark;

    /* Colores de marca de style.css, ajustados para fondo oscuro */
    --primary: #8B6CFF;
    --primary-dark: #6A4DF0;
    --primary-light: #B9A7FF;
    --violet-main: #6A4DF0;
    --violet-deep: #5636E0;
    --violet-light: #8B6CFF;
    --text: #F3F0FA;
    --text-soft: #CFC9DD;
    --muted: #A9A2BC;
    --ink-main: #F3F0FA;
    --ink-soft: #A9A2BC;
    --surface-page: #0C0A12;
}

/* 03. BASE =============================================== */
html { background: var(--sh-bg); }

body {
    font-family: var(--sh-font);
    background: var(--sh-bg);
    color: var(--sh-text);
    -webkit-font-smoothing: antialiased;
}

body, .site-header, .tool-card, .compressor-card, .tool-info-card, .footer {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

h1, h2, h3,
.brand-name {
    font-family: var(--sh-display);
}

h1, h2 { letter-spacing: -0.035em; }

.section-label {
    font-family: var(--sh-mono);
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--sh-accent-text);
}

.section-label::before { content: "// "; opacity: .7; }

::selection { background: rgba(139, 108, 255, .35); }

:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

/* 04. ENCABEZADO ========================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--sh-header);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--sh-line);
}

.header-inner { min-height: 68px; gap: 18px; }

.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.site-header .brand-logo-image {
    height: 50px;
    width: auto;
}

.sh-logo-dark { display: none !important; }
:root[data-theme="dark"] .sh-logo-light { display: none !important; }
:root[data-theme="dark"] .sh-logo-dark { display: block !important; }

.nav-quick,
.nav-dropdown-toggle {
    border-radius: 10px;
    color: var(--sh-muted);
    font-weight: 500;
}

.nav-quick:hover,
.nav-dropdown-toggle:hover,
.nav-quick.is-current,
.nav-dropdown-toggle.is-current {
    color: var(--sh-text);
    background: var(--sh-surface-2);
}

.mega-menu {
    background: var(--sh-surface);
    border: 1px solid var(--sh-line-strong);
    box-shadow: var(--sh-shadow-hover);
}

.mega-menu-title {
    font-family: var(--sh-mono);
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--sh-muted);
}

.mega-item:hover,
.mega-item.is-current { background: var(--sh-surface-2); }

.mega-text strong { color: var(--sh-text); }
.mega-text small { color: var(--sh-muted); }

.mega-menu-footer {
    border-top: 1px solid var(--sh-line);
    background: var(--sh-surface-2);
    color: var(--sh-muted);
}

.header-cta,
.mobile-navigation-cta {
    background: var(--sh-btn);
    box-shadow: none;
    border-radius: 12px;
}

.header-cta:hover { background: var(--sh-btn-hover); }

.sh-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Botón de tema (sol / luna) */
.sh-theme-toggle {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--sh-line-strong);
    background: var(--sh-chip);
    color: var(--sh-text);
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

.sh-theme-toggle:hover { border-color: var(--sh-accent); transform: rotate(-12deg); }
.sh-theme-toggle svg { width: 19px; height: 19px; }
.sh-theme-toggle .sh-icon-sun { display: none; }
:root[data-theme="dark"] .sh-theme-toggle .sh-icon-sun { display: block; }
:root[data-theme="dark"] .sh-theme-toggle .sh-icon-moon { display: none; }

.mobile-navigation {
    background: var(--sh-surface);
    border-top: 1px solid var(--sh-line);
}

.mobile-tool { background: var(--sh-surface-2); color: var(--sh-text); }

/* 05. PORTADA DEL INICIO ================================= */
.sh-hero {
    position: relative;
    overflow: hidden;
    padding: 84px 0 56px;
    text-align: center;
}

.sh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(600px 340px at 30% 0%, var(--sh-glow-1), transparent 70%),
        radial-gradient(520px 300px at 75% 10%, var(--sh-glow-2), transparent 70%);
}

.sh-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--sh-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--sh-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}

.sh-hero .container { position: relative; z-index: 1; }

.sh-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--sh-line-strong);
    background: var(--sh-chip);
    color: var(--sh-muted);
    font-size: .85rem;
    font-weight: 500;
}

.sh-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C58B;
    box-shadow: 0 0 0 4px rgba(34, 197, 139, .18);
}

.sh-hero h1 {
    max-width: 880px;
    margin: 22px auto 18px;
    color: var(--sh-text);
    font-size: clamp(2.6rem, 6.4vw, 5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.sh-grad {
    background: linear-gradient(90deg, var(--sh-grad-a), var(--sh-grad-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sh-hero-lead {
    max-width: 600px;
    margin: 0 auto 32px;
    color: var(--sh-muted);
    font-size: 1.12rem;
    line-height: 1.6;
}

.sh-command {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 18px;
    border-radius: 16px;
    border: 1px solid var(--sh-line-strong);
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow);
}

.sh-command:focus-within { border-color: var(--sh-accent); }
.sh-command svg { color: var(--sh-muted); flex-shrink: 0; }

.sh-command input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sh-text);
    font: inherit;
    font-size: 1rem;
}

.sh-command input::placeholder { color: var(--sh-muted); opacity: .85; }

.sh-command button {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 11px;
    background: var(--sh-btn);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sh-command button:hover { background: var(--sh-btn-hover); }

.sh-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--sh-muted);
    font-size: .88rem;
}

.sh-quick a {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--sh-line);
    background: var(--sh-chip);
    color: var(--sh-text);
    text-decoration: none;
    font-weight: 500;
}

.sh-quick a:hover { border-color: var(--sh-accent); }

.sh-search-empty {
    display: none;
    padding: 28px;
    border: 1px dashed var(--sh-line-strong);
    border-radius: 16px;
    color: var(--sh-muted);
    text-align: center;
}

.sh-search-empty.is-visible { display: block; }

/* 06. CATÁLOGO =========================================== */
.tools-section { background: transparent; }

.tools-section h2,
#toolsSectionTitle { color: var(--sh-text); }

.tool-filter {
    border: 1px solid var(--sh-line);
    background: var(--sh-chip);
    color: var(--sh-muted);
    box-shadow: none;
}

.tool-filter.active {
    background: var(--sh-surface-2);
    border-color: var(--sh-line-strong);
    color: var(--sh-text);
}

.tool-filter-count,
.tool-filter.active .tool-filter-count {
    font-family: var(--sh-mono);
    background: transparent;
    color: var(--sh-muted);
    box-shadow: none;
}

.tool-card {
    background: var(--sh-surface);
    border: 1px solid var(--sh-line);
    border-radius: 18px;
    box-shadow: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .25s ease;
}

.tool-card::before,
.tool-card::after { opacity: 0; }

.tool-card:hover {
    transform: translateY(-3px);
    border-color: var(--sh-line-strong);
    box-shadow: var(--sh-shadow-hover);
}

.tool-card .available { display: none; }

.tool-card h3 { color: var(--sh-text); letter-spacing: -0.02em; }
.tool-card p { color: var(--sh-muted); }

.tool-icon {
    border: 1px solid var(--sh-line);
    box-shadow: none;
}

.tools-grid .tool-card { cursor: pointer; }

.tools-grid .tool-card p { margin-bottom: 16px; }

.tools-grid .tool-card .tool-action-button {
    min-height: 0;
    margin-top: auto;
    padding: 14px 0 0;
    border-radius: 0;
    border-top: 1px solid var(--sh-line);
    background: transparent;
    color: var(--sh-accent-text);
    box-shadow: none;
    justify-content: space-between;
    font-size: .84rem;
    font-weight: 600;
}

.tools-grid .tool-card:hover .tool-action-button,
.tools-grid .tool-card .tool-action-button:hover {
    background: transparent;
    color: var(--sh-accent-text);
    transform: none;
}

.tool-action-button span { transition: transform .2s ease; }
.tool-card:hover .tool-action-button span { transform: translateX(4px); }

/* 07. SECCIONES DEL INICIO =============================== */
.categories-section,
.how-section { background: transparent; }

.about-section {
    background: var(--sh-surface-2);
    border-block: 1px solid var(--sh-line);
}

.categories-section h2 span,
.about-section h2 span,
.how-section h2 span {
    background: linear-gradient(90deg, var(--sh-grad-a), var(--sh-grad-b));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.category-v2,
.about-card,
.how-card,
.how-step {
    background: var(--sh-surface);
    border-color: var(--sh-line);
    box-shadow: none;
}

/* 08. PÁGINAS DE HERRAMIENTA ============================= */
.tool-page {
    position: relative;
    background: transparent;
}

.tool-page::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 560px;
    pointer-events: none;
    background:
        radial-gradient(560px 300px at 35% 0%, var(--sh-glow-1), transparent 70%),
        radial-gradient(480px 260px at 70% 6%, var(--sh-glow-2), transparent 70%);
}

.tool-page > * { position: relative; }

.tool-page-header h1 {
    color: var(--sh-text);
    font-weight: 800;
}

.tool-page-header p { color: var(--sh-muted); }

.compressor-card {
    background: var(--sh-surface);
    border: 1px solid var(--sh-line-strong);
    box-shadow: var(--sh-shadow);
}

.upload-zone {
    border-color: color-mix(in srgb, var(--sh-accent) 40%, transparent);
    background: color-mix(in srgb, var(--sh-accent) 5%, var(--sh-surface));
}

.upload-zone:hover,
.upload-zone.is-dragover,
.upload-zone.dragover {
    border-color: var(--sh-accent);
    background: color-mix(in srgb, var(--sh-accent) 9%, var(--sh-surface));
}

.compress-button,
.download-button {
    background: var(--sh-btn);
    box-shadow: 0 12px 28px -14px rgba(106, 77, 240, .8);
}

.compress-button:hover,
.download-button:hover { background: var(--sh-btn-hover); }

.tool-info-card {
    background: var(--sh-surface);
    border-color: var(--sh-line);
    box-shadow: none;
}

.tool-info-number {
    font-family: var(--sh-mono);
    color: var(--sh-accent-text);
}

/* Previsualizaciones de páginas PDF: siempre en blanco, como el papel */
:root[data-theme="dark"] canvas,
:root[data-theme="dark"] .pe-thumb-img { background-color: #fff; }

/* Controles nativos (audio, video, selects) acordes al tema */
:root[data-theme="dark"] select,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea { color-scheme: dark; }

/* 09. PIE DE PÁGINA ====================================== */
:root[data-theme="dark"] .footer {
    background: #08070D;
    border-top: 1px solid var(--sh-line);
}

/* 10. RESPONSIVE ========================================= */
@media (max-width: 1100px) {
    .header-cta { display: none; }
}

@media (max-width: 760px) {
    .sh-hero { padding: 48px 0 36px; }
    .sh-hero-lead { font-size: 1rem; }
    .sh-command { padding-left: 14px; }
    .sh-command button { padding: 0 16px; }
    .sh-quick > span { width: 100%; }
    .header-inner { min-height: 62px; }
    .sh-theme-toggle { width: 40px; height: 40px; }
    .site-header .brand-logo-image { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* Acomodo del encabezado cuando aparece el menú de hamburguesa */
@media (max-width: 1024px) {
    .sh-header-actions { margin-left: auto; }
}

/* Catálogo compacto en celular: ícono · nombre y descripción · flecha */
@media (max-width: 640px) {
    .tools-grid { gap: 10px; grid-template-columns: minmax(0, 1fr) !important; }

    .tools-grid .tool-card {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 18px;
        grid-template-rows: auto auto;
        column-gap: 14px;
        align-items: center;
        min-height: 0;
        padding: 14px 16px;
        border-radius: 14px;
    }

    .tools-grid .tool-card::before { display: none; }

    .tools-grid .tool-card .card-head {
        grid-column: 1;
        grid-row: 1 / 3;
        margin: 0;
    }

    .tools-grid .tool-card .tool-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .tools-grid .tool-card h3 {
        grid-column: 2;
        margin: 0;
        font-size: 1rem;
    }

    .tools-grid .tool-card p {
        grid-column: 2;
        margin: 2px 0 0;
        font-size: .84rem;
        line-height: 1.4;
    }

    .tools-grid .tool-card .tool-action-button {
        grid-column: 3;
        grid-row: 1 / 3;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 0;
    }

    .tools-grid .tool-card .tool-action-button span { font-size: 18px; }

    .tools-grid .tool-card:hover { transform: none; }
}

/* Botón de idioma ES | EN */
.sh-lang-toggle {
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--sh-line-strong);
    background: var(--sh-chip);
    color: var(--sh-muted);
    font: 600 .8rem/1 var(--sh-font);
    text-decoration: none;
    flex-shrink: 0;
}

.sh-lang-toggle span {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 0 9px;
    border-radius: 8px;
}

.sh-lang-toggle span.is-on {
    background: var(--sh-btn);
    color: #fff;
}

.sh-lang-toggle:hover { border-color: var(--sh-accent); color: var(--sh-text); }

@media (max-width: 760px) {
    .sh-header-actions { gap: 6px; }
    .sh-lang-toggle { height: 40px; }
    .sh-lang-toggle span { padding: 0 7px; }
}

/* Márgenes laterales en páginas de herramienta que no usan .container
   (Editar, Censurar y Ordenar PDF): el texto ya no toca el borde en celular. */
@media (max-width: 1100px) {
    .tool-page > :not(.container):not(.pe-shell) {
        padding-left: 18px;
        padding-right: 18px;
    }
}
@media (max-width: 760px) {
    .tool-page > .container { width: calc(100% - 36px); }
}

/* Encabezado estable: el botón ES | EN y el de tema no cambian de lugar
   al cambiar de idioma (columnas fijas: logo · menú centrado · acciones). */
@media (min-width: 1101px) {
    .header-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 24px;
        align-items: center;
    }
    .header-inner > .brand { justify-self: start; }
    .header-inner > .main-nav { justify-self: center; }
    .header-inner > .sh-header-actions { justify-self: end; }
    .header-cta {
        min-width: 172px;
        justify-content: center;
        text-align: center;
    }
}

/* Logo en el pie de página */
.footer .footer-brand-logo img {
    display: block;
    height: 64px;
    width: auto;
}

@media (max-width: 760px) {
    .footer .footer-brand-logo img { height: 54px; }
}

/* =========================================================
   CENSURAR PDF: ajustes del editor
   ========================================================= */

/* Panel derecho: la guía ya no se encima con el contador
   cuando la ventana es baja; si no cabe, se desplaza. */
body.redact-editor-active .redact-side-content {
    align-items: flex-start;
    min-height: 0;
    overflow-y: auto;
}

/* Miniaturas: la imagen toma su forma real (sin bandas)
   y el texto «Página N» ya no se corta. */
#redactEditor .redact-page img {
    aspect-ratio: auto;
    height: auto;
    background: transparent;
}

#redactEditor .redact-page .organize-page-label {
    padding-right: 3px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    text-align: center;
}

/* Ordenar y Extraer: el fondo detrás de la miniatura es discreto en oscuro */
:root[data-theme="dark"] .organize-page img {
    background: rgba(255, 255, 255, 0.04);
}