/* =========================================================
   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);
}

/* =========================================================
   CENSURAR PDF: herramientas del editor
   (deshacer, mover/ajustar, lista, conteo y vista previa)
   ========================================================= */

/* Botones de herramientas en el panel */
.redact-side-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sh-line);
}

.redact-tool-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--sh-line-strong);
    border-radius: 10px;
    background: var(--sh-surface);
    color: var(--sh-text);
    font: 600 13px/1.2 var(--sh-font);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.redact-tool-icon {
    display: inline-flex;
    flex: none;
}

.redact-tool-icon svg {
    display: block;
}

.redact-tool-button:hover:not(:disabled) {
    border-color: var(--sh-accent);
    color: var(--sh-accent-text);
}

.redact-tool-button.active,
.redact-tool-button.active:hover {
    background: var(--sh-accent);
    border-color: var(--sh-accent);
    color: #fff !important;
}

.redact-tool-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Lista de áreas */
.redact-area-list-wrap {
    width: 100%;
}

.redact-area-list-wrap[hidden],
.redact-side-guide[hidden] {
    display: none !important;
}

.redact-area-list-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.redact-area-list-title strong {
    color: var(--sh-text);
    font-size: 14px;
}

.redact-area-list-title small {
    color: var(--sh-muted);
    font-size: 12px;
    line-height: 1.4;
}

.redact-area-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.redact-area-item {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--sh-line);
    border-radius: 10px;
    background: var(--sh-surface);
}

.redact-area-item.is-selected {
    border-color: var(--sh-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh-accent) 25%, transparent);
}

.redact-area-go {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    color: var(--sh-text);
    font: 500 13px/1.2 var(--sh-font);
    text-align: left;
    cursor: pointer;
}

.redact-area-swatch {
    flex: none;
    width: 18px;
    height: 10px;
    border-radius: 2px;
    background: #111;
    box-shadow: 0 0 0 1px var(--sh-line-strong);
}

.redact-area-remove {
    flex: none;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sh-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.redact-area-remove:hover {
    background: color-mix(in srgb, #e5484d 14%, transparent);
    color: #e5484d;
}

/* Conteo en miniaturas */
#redactPages .redact-page {
    position: relative;
}

.redact-page-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font: 700 12px/22px var(--sh-font);
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

.redact-page-badge[hidden] {
    display: none;
}

/* Área seleccionada: mover y agarraderas */
.redact-selection {
    touch-action: none;
}

.redact-selection.is-selected {
    cursor: move;
}

.redact-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #6c3cff;
    border-radius: 3px;
    background: #fff;
    z-index: 2;
    touch-action: none;
}

.redact-handle::after {           /* zona táctil más grande */
    content: "";
    position: absolute;
    inset: -10px;
}

.redact-handle-nw { left: -8px;  top: -8px;  cursor: nwse-resize; }
.redact-handle-ne { right: -8px; top: -8px;  cursor: nesw-resize; }
.redact-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.redact-handle-sw { left: -8px;  bottom: -8px; cursor: nesw-resize; }
.redact-handle-n  { left: calc(50% - 6px); top: -8px;    cursor: ns-resize; }
.redact-handle-s  { left: calc(50% - 6px); bottom: -8px; cursor: ns-resize; }
.redact-handle-e  { right: -8px; top: calc(50% - 6px); cursor: ew-resize; }
.redact-handle-w  { left: -8px;  top: calc(50% - 6px); cursor: ew-resize; }

/* Vista previa: negro sólido como quedará el archivo */
.redact-preview-active .redact-selection,
.redact-preview-active .redact-selection.is-selected {
    background: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.redact-preview-active .redact-handle {
    display: none;
}

/* Celular: herramientas en 4 columnas compactas */
@media (max-width: 640px) {
    .redact-side-tools {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 12px 14px;
        gap: 6px;
    }

    .redact-tool-button {
        flex-direction: column;
        gap: 3px;
        min-height: 52px;
        padding: 6px 4px;
        font-size: 11px;
    }
}

/* =========================================================
   CENSURAR PDF: buscar, detectar, apariencia y comprobación
   ========================================================= */

.redact-find,
.redact-look {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--sh-line);
}

.redact-look {
    border-bottom: 0;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--sh-line);
}

.redact-find-title {
    color: var(--sh-text);
    font-size: 14px;
}

.redact-find-form {
    display: flex;
    gap: 6px;
}

.redact-find-form input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--sh-line-strong);
    border-radius: 10px;
    background: var(--sh-surface);
    color: var(--sh-text);
    font: 400 13px var(--sh-font);
}

.redact-find-form input:focus {
    outline: 2px solid color-mix(in srgb, var(--sh-accent) 40%, transparent);
    border-color: var(--sh-accent);
}

.redact-find-form .redact-tool-button {
    flex: none;
}

.redact-detect summary {
    cursor: pointer;
    color: var(--sh-accent-text);
    font: 600 13px var(--sh-font);
    padding: 4px 0;
}

.redact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
}

.redact-chip {
    position: relative;
    cursor: pointer;
}

.redact-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.redact-chip span {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--sh-line-strong);
    border-radius: 999px;
    color: var(--sh-muted);
    font: 600 12px var(--sh-font);
}

.redact-chip input:checked + span {
    border-color: var(--sh-accent);
    background: color-mix(in srgb, var(--sh-accent) 12%, transparent);
    color: var(--sh-accent-text);
}

.redact-chip input:focus-visible + span {
    outline: 2px solid var(--sh-accent);
}

.redact-detect-run {
    width: 100%;
}

.redact-find-message {
    margin: 0;
    color: var(--sh-muted);
    font-size: 12px;
    line-height: 1.45;
}

.redact-find-results[hidden],
.redact-find-message[hidden],
.redact-verification[hidden] {
    display: none !important;
}

.redact-find-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--sh-text);
}

.redact-link {
    border: 0;
    background: none;
    padding: 2px 4px;
    color: var(--sh-accent-text);
    font: 600 12px var(--sh-font);
    cursor: pointer;
}

.redact-find-list {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.redact-find-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: 1px solid var(--sh-line);
    border-radius: 8px;
    background: var(--sh-surface);
}

.redact-find-item input {
    flex: none;
    accent-color: var(--sh-accent);
}

.redact-find-go {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 4px 0;
    color: var(--sh-text);
    font: 400 12px var(--sh-font);
    text-align: left;
    cursor: pointer;
}

.redact-find-page {
    flex: none;
    color: var(--sh-muted);
}

.redact-find-type {
    flex: none;
    padding: 1px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--sh-accent) 12%, transparent);
    color: var(--sh-accent-text);
    font-weight: 700;
    font-size: 11px;
}

.redact-find-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--sh-mono);
}

.redact-find-add {
    width: 100%;
}

/* Coincidencia propuesta sobre la página */
.redact-candidate {
    position: absolute;
    z-index: 8;
    border: 2px dashed #e5484d;
    background: rgba(229, 72, 77, .14);
    pointer-events: none;
}

/* Apariencia */
.redact-look-fill {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.redact-look-fill label {
    position: relative;
    cursor: pointer;
}

.redact-look-fill input {
    position: absolute;
    opacity: 0;
}

.redact-look-fill span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border: 1px solid var(--sh-line-strong);
    border-radius: 10px;
    color: var(--sh-text);
    font: 600 13px var(--sh-font);
}

.redact-look-fill input:checked + span {
    border-color: var(--sh-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh-accent) 25%, transparent);
}

.redact-look-fill input:focus-visible + span {
    outline: 2px solid var(--sh-accent);
}

.redact-look-swatch {
    width: 16px;
    height: 10px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--sh-line-strong);
}

.redact-look-swatch.is-black { background: #000; }
.redact-look-swatch.is-white { background: #fff; }

.redact-look-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--sh-text);
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
}

.redact-look-label input {
    margin-top: 2px;
    accent-color: var(--sh-accent);
}

/* Vista previa con la apariencia elegida */
.redact-preview-active.redact-fill-white .redact-selection,
.redact-preview-active.redact-fill-white .redact-selection.is-selected {
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) !important;
}

.redact-preview-active.redact-has-label .redact-selection {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.redact-preview-active.redact-has-label .redact-selection::after {
    content: var(--redact-label);
    color: #fff;
    font: 700 11px/1 Helvetica, Arial, sans-serif;
    white-space: nowrap;
}

.redact-preview-active.redact-fill-white.redact-has-label .redact-selection::after {
    color: #000;
}

/* Comprobación final en el resultado */
.redact-verification {
    max-width: 520px;
    margin: 18px auto 22px;
    padding: 14px 16px;
    border: 1px solid var(--sh-line);
    border-radius: 12px;
    background: var(--sh-surface);
    text-align: left;
}

.redact-verification strong {
    display: block;
    margin-bottom: 8px;
    color: var(--sh-text);
    font-size: 14px;
}

.redact-verification ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.redact-verification li {
    display: flex;
    gap: 8px;
    color: var(--sh-text);
    font-size: 13px;
    line-height: 1.4;
}

.redact-verification-icon {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 11px/1 var(--sh-font);
    color: #fff;
    background: #1f9d55;
}

.redact-verification li.is-warn .redact-verification-icon {
    background: #e5484d;
}

/* El contenido del panel se apila en columna (buscar, guía, lista, apariencia). */
#redactSidePanel .redact-side-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

#redactSidePanel .redact-side-content > * {
    width: 100%;
    flex: none;
}

/* Panel de Censurar: todo el panel se desplaza (antes solo una franja
   pequeña en medio) y los botones de acción quedan fijos abajo. */
body.redact-editor-active #redactSidePanel .redact-side-content {
    flex: 0 0 auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.redact-editor-active #redactSidePanel .redact-side-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: auto;
    background: var(--sh-surface);
    box-shadow: 0 -10px 18px -12px rgba(0, 0, 0, .35);
}

.redact-find-head {
    flex-wrap: wrap;
}

.redact-find-head strong {
    white-space: nowrap;
}

body.redact-editor-active #redactSidePanel .redact-side-actions {
    padding: 12px 18px 12px !important;
    gap: 8px;
}

.redact-find-results,
.redact-find-message,
.redact-area-list-wrap {
    scroll-margin-bottom: 170px;
}

/* Pantallas bajas: «Eliminar selección» ya está en la lista (×) y en Supr. */
@media (max-height: 760px) and (min-width: 901px) {
    body.redact-editor-active #redactSidePanel .redact-side-delete {
        display: none;
    }

    body.redact-editor-active #redactSidePanel .redact-side-header {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    body.redact-editor-active #redactSidePanel .redact-side-status {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* «Censurar las marcadas» se distingue de «Aplicar censura» (el paso final). */
#redactSidePanel .redact-find-add {
    background: transparent !important;
    border: 2px solid var(--sh-accent) !important;
    color: var(--sh-accent-text) !important;
    box-shadow: none !important;
}

#redactSidePanel .redact-find-add:disabled {
    opacity: .45;
}

/* =========================================================
   EDITAR PDF: deshacer / rehacer
   ========================================================= */
.pe-tools-sep {
    width: 1px;
    align-self: stretch;
    margin: 6px 4px;
    background: var(--sh-line);
}

.pe-history {
    display: inline-flex;
    gap: 2px;
}

.pe-tool.pe-tool-icon {
    min-width: 36px;
    padding-left: 8px;
    padding-right: 8px;
    justify-content: center;
}

.pe-tool.pe-tool-icon:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.pe-local-fonts[hidden] {
    display: none !important;
}

/* Celular: la barra superior del editor cabe completa
   (Guardar queda solo con ícono; también está abajo). */
@media (max-width: 640px) {
    .pe-topbar .pe-top-actions .pe-btn-primary > span {
        display: none;
    }

    .pe-topbar .pe-top-actions .pe-btn-primary {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pe-tools-sep {
        margin: 6px 1px;
    }
}

/* =========================================================
   EDITAR PDF: marcas (resaltar / subrayar / tachar) y comentarios
   ========================================================= */
.pe-annot-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Las marcas dejan pasar el clic al texto (para editarlo);
   con la herramienta Marcar se pueden seleccionar. */
.pe-annot-layer .pe-mark-piece {
    pointer-events: none;
}

.pe-shell.is-markup-tool .pe-annot-layer .pe-mark-piece,
.pe-annot-layer .pe-note-pin {
    pointer-events: auto;
}

.pe-shell.is-markup-tool .pe-surface {
    cursor: text;
}

.pe-shell.is-note-tool .pe-surface {
    cursor: copy;
}

.pe-shell.is-markup-tool .pe-existing,
.pe-shell.is-markup-tool .pe-text,
.pe-shell.is-note-tool .pe-existing,
.pe-shell.is-note-tool .pe-text {
    pointer-events: none;
}

.pe-mark-piece {
    position: absolute;
    cursor: pointer;
}

.pe-mark-highlight .pe-mark-piece {
    background: var(--pe-annot-color, #ffd400);
    opacity: .42;
    mix-blend-mode: multiply;
    border-radius: 2px;
}

.pe-mark-underline .pe-mark-piece {
    background: linear-gradient(var(--pe-annot-color), var(--pe-annot-color)) left bottom / 100% 2px no-repeat;
}

.pe-mark-strike .pe-mark-piece {
    background: linear-gradient(var(--pe-annot-color), var(--pe-annot-color)) left 55% / 100% 2px no-repeat;
}

.pe-mark.is-selected .pe-mark-piece {
    outline: 2px solid #6c3cff;
    outline-offset: 1px;
}

.pe-mark-ghost {
    position: absolute;
    z-index: 4;
    border: 1.5px dashed #6c3cff;
    background: rgba(108, 60, 255, .08);
    pointer-events: none;
}

.pe-note-pin {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -4px 0 0 -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 6px 6px 6px 2px;
    background: var(--pe-annot-color, #ffd400);
    color: #2b2100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    cursor: pointer;
    z-index: 3;
}

.pe-note-pin.is-selected {
    outline: 2px solid #6c3cff;
    outline-offset: 2px;
}

.pe-note-editor {
    position: absolute;
    z-index: 20;
    width: 250px;
    padding: 10px;
    border: 1px solid var(--sh-line-strong);
    border-radius: 12px;
    background: var(--sh-surface);
    color: var(--sh-text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
    font: 400 13px/1.4 var(--sh-font);
}

.pe-note-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.pe-note-text {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 74px;
    padding: 8px;
    border: 1px solid var(--sh-line-strong);
    border-radius: 8px;
    background: var(--sh-bg);
    color: var(--sh-text);
    font: 400 13px/1.4 var(--sh-font);
}

.pe-note-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.pe-note-actions button {
    border: 0;
    border-radius: 8px;
    padding: 6px 12px;
    font: 600 12px var(--sh-font);
    cursor: pointer;
}

.pe-note-delete {
    background: transparent;
    color: #e5484d;
}

.pe-note-done {
    background: var(--sh-accent);
    color: #fff;
}

/* Barra de marcado */
.pe-markupbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--sh-line);
    background: var(--sh-surface);
    overflow-x: auto;
}

.pe-markupbar[hidden] {
    display: none !important;
}

.pe-mark-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    padding: 0 10px !important;
    white-space: nowrap;
    font: 600 12px var(--sh-font);
}

.pe-mark-sample {
    font: 700 13px/1 Georgia, serif;
    padding: 1px 2px;
}

.pe-mark-sample.is-highlight { background: #ffd400; color: #222; border-radius: 2px; }
.pe-mark-sample.is-underline { text-decoration: underline 2px; }
.pe-mark-sample.is-strike { text-decoration: line-through 2px; }

.pe-mark-colors {
    display: inline-flex;
    gap: 6px;
}

.pe-mark-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--pe-annot-color);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
    cursor: pointer;
    padding: 0;
}

.pe-mark-color.is-active {
    border-color: var(--sh-surface);
    box-shadow: 0 0 0 2px var(--sh-accent);
}

/* La barra de herramientas del editor siempre cabe: con poco
   ancho se quedan solo los íconos (el nombre sale al pasar el mouse). */
@media (max-width: 1180px) {
    .pe-topbar .pe-tools .pe-tool > span {
        display: none;
    }
}

@media (max-width: 640px) {
    .pe-topbar .pe-tools {
        gap: 0;
    }

    .pe-topbar .pe-tools .pe-tool {
        min-width: 32px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .pe-topbar .pe-top-actions {
        gap: 4px;
    }
}

.pe-shell.is-markup-tool .pe-surface {
    touch-action: none;
}

/* =========================================================
   EDITAR PDF EN CELULAR
   ========================================================= */

/* El navegador no hace zoom a todo el sitio: el zoom con dos
   dedos lo maneja el editor. Un dedo sigue desplazando. */
.pe-canvas-area {
    touch-action: pan-x pan-y;
}

@media (max-width: 900px) {

    /* iPhone acerca la página si un campo tiene letra < 16 px. */
    .pe-shell input,
    .pe-shell select,
    .pe-shell textarea,
    .pe-note-text,
    .redact-find-form input {
        font-size: 16px !important;
    }

    /* Barra de marcado compacta: sin nombres, todo visible. */
    .pe-markupbar {
        gap: 6px;
        padding: 6px 10px;
        overflow-x: visible;
        justify-content: space-between;
    }


    .pe-mark-type .pe-mark-sample {
        font-size: 15px;
    }

    .pe-mark-colors {
        gap: 5px;
    }

    .pe-mark-color {
        width: 24px;
        height: 24px;
    }

    .pe-markupbar .pe-sep {
        display: none;
    }
}

/* La barra de marcado no se encoge (antes se cortaban los nombres). */
.pe-markupbar {
    flex: 0 0 auto;
    min-height: 46px;
}

.pe-markupbar .pe-mark-type {
    flex-direction: row;
    height: 32px;
    line-height: 1;
}

/* Celular: el comentario se escribe en un panel abajo (siempre visible). */
@media (max-width: 640px) {
    .pe-note-editor.is-sheet {
        position: fixed;
        left: 12px !important;
        right: 12px;
        top: auto !important;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        width: auto;
        z-index: 60;
    }
}

/* Tipo de marca elegido: bien visible (sobre todo en celular). */
.pe-markupbar .pe-mark-type.is-active {
    background: var(--sh-accent) !important;
    color: #fff !important;
}

.pe-markupbar .pe-mark-type.is-active .pe-mark-sample {
    color: #fff;
}

.pe-markupbar .pe-mark-type.is-active .pe-mark-sample.is-highlight {
    color: #222;
}

/* Mientras se arrastra se ve cómo quedará la marca. */
.pe-mark-ghost.is-highlight {
    border-style: solid;
    border-color: transparent;
    background: var(--pe-annot-color);
    opacity: .4;
}

.pe-mark-ghost.is-underline {
    border: 0;
    border-bottom: 3px solid var(--pe-annot-color);
    background: rgba(108, 60, 255, .06);
}

.pe-mark-ghost.is-strike {
    border: 0;
    background:
        linear-gradient(var(--pe-annot-color), var(--pe-annot-color)) left 55% / 100% 3px no-repeat,
        rgba(108, 60, 255, .06);
}

/* Comentarios: se pueden arrastrar. */
.pe-note-pin {
    touch-action: none;
    cursor: grab;
}

.pe-note-pin.is-dragging {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}

/* Muestras de marca dibujadas (Safari en iPhone no siempre pinta
   text-decoration con grosor): se ven igual en todos los equipos. */
.pe-mark-sample.is-underline,
.pe-mark-sample.is-strike {
    text-decoration: none !important;
}

.pe-mark-sample.is-underline {
    border-bottom: 2px solid currentColor;
    padding-bottom: 0;
    line-height: 1;
}

.pe-mark-sample.is-strike {
    background: linear-gradient(currentColor, currentColor) center 56% / 100% 2px no-repeat;
}

@media (max-width: 900px) {

    /* Celular: muestra arriba y nombre corto abajo. */
    .pe-markupbar .pe-mark-type {
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        height: auto !important;
        min-height: 44px;
        padding: 4px 8px !important;
        font-size: 10.5px !important;
        font-weight: 600;
        line-height: 1.1;
    }

    .pe-markupbar .pe-mark-type .pe-mark-sample {
        font-size: 15px;
    }
}

/* =========================================================
   EDITAR PDF: párrafos, interlineado, buscar y reemplazar
   ========================================================= */
.pe-existing.is-in-para {
    display: none !important;
}

.pe-para {
    position: absolute;
    inset: 0 auto auto 0;
    width: 0;
    height: 0;
    z-index: 2;
}

.pe-para-cover {
    position: absolute;
    border-radius: 2px;
}

.pe-para-text {
    position: absolute;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    outline: none;
    cursor: text;
    min-height: 1em;
}

.pe-para.is-selected .pe-para-text,
.pe-para:hover .pe-para-text {
    box-shadow: 0 0 0 1.5px #6c3cff;
    border-radius: 2px;
}

.pe-para.is-editing .pe-para-text {
    box-shadow: 0 0 0 2px #6c3cff, 0 0 0 5px rgba(108, 60, 255, .18);
}

.pe-para.is-deleted .pe-para-text {
    display: none;
}

.pe-para-chip {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: #6c3cff;
    color: #fff;
    font: 600 12px/1 var(--sh-font);
    white-space: nowrap;
    transform: translateX(-100%);
    box-shadow: 0 4px 12px rgba(108, 60, 255, .35);
    cursor: pointer;
}

.pe-lineheight {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sh-muted);
}

.pe-replace {
    margin: 0 0 14px;
    border: 1px solid var(--sh-line);
    border-radius: 12px;
    background: var(--sh-surface);
}

.pe-replace summary {
    padding: 10px 12px;
    cursor: pointer;
    font: 600 13px var(--sh-font);
    color: var(--sh-text);
}

.pe-replace-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 12px;
}

.pe-replace-form input[type="text"] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--sh-line-strong);
    border-radius: 8px;
    background: var(--sh-bg);
    color: var(--sh-text);
    font: 400 13px var(--sh-font);
}

.pe-replace-case {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--sh-muted);
}

.pe-replace-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 6px;
}

.pe-replace-actions .pe-btn {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
}

.pe-replace-result {
    margin: 0;
    font-size: 12px;
    color: var(--sh-muted);
}

.pe-replace-result[hidden] {
    display: none;
}

/* Buscar: coincidencia actual y navegación */
.pe-existing.is-found,
.pe-para-text.is-found {
    outline: 3px solid #f79009;
    outline-offset: 2px;
    background: rgba(247, 144, 9, .18);
    border-radius: 2px;
}

.pe-find-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pe-find-nav[hidden] {
    display: none;
}

.pe-find-nav .pe-btn {
    min-width: 40px;
    justify-content: center;
    font-size: 18px;
    padding: 0 10px;
}

.pe-find-nav span {
    font: 600 13px var(--sh-font);
    color: var(--sh-text);
}