/* =========================================================
   Prompts.gratis · estilos del tema
   Fuentes propias (sin Google Fonts) y base mínima (lo que antes ponía Bricks)
   ========================================================= */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/fredoka-700.woff2) format("woff2")}
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{margin:0;text-rendering:optimizeLegibility}
h1{font-size:2.4em}h2{font-size:2.1em}h3{font-size:1.8em}h4{font-size:1.6em}h5{font-size:1.3em}h6{font-size:1.1em}
img{height:auto;max-width:100%;vertical-align:middle;border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button{border:none;cursor:pointer;padding:0;text-transform:none}
.skip-link{position:absolute;left:0;top:0;z-index:9999;padding:6px 12px;background:#000;color:#fff;font-weight:700;border-bottom-right-radius:8px;transform:translateY(-120%);transition:transform .1s}
.skip-link:focus{transform:none}
.pg-wrap{display:block}
/* Hueco de los iconos: icons.css se carga sin bloquear y pinta el icono al llegar (sin saltos) */
.fa-solid,.fa-regular,.fa-brands{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none}

/* =========================================================
   (estilos de la web)
   Layout: sidebar fijo (#site-header) + contenido (#site-content) + pie (#site-footer) desplazados a la derecha
   ========================================================= */
:root {
  --bg: #f6f7f7; --surface: #ffffff; --surface-2: #f1f3f3; --text: #16201e; --muted: #64706d; --border: #e3e7e6;
  --accent: #0f8b7d; --accent-hover: #0b7266; --accent-ink: #ffffff; --accent-soft: #e2f3f0;
  --var-bg: #dff3ef; --var-ink: #0b6a5f;
  --shadow: 0 1px 2px rgba(16,32,30,.04), 0 4px 14px rgba(16,32,30,.05);
  --shadow-lg: 0 10px 40px rgba(16,32,30,.16);
  --radius: 18px; --sb: 264px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1312; --surface: #161d1b; --surface-2: #1d2624; --text: #eef3f2; --muted: #9aa8a5; --border: #26302e;
  --accent: #2bb5a3; --accent-hover: #4cc9b8; --accent-ink: #04201c; --accent-soft: #123430;
  --var-bg: #123430; --var-ink: #7fe0d2; --shadow: 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 10px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}
html.sb-collapsed { --sb: 76px; }

html:root { font-size: 17px; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.55; }
body a { color: inherit; text-decoration: none; }
body button { font: inherit; color: inherit; }
body h1, body h2, body h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout con Bricks ---------- */
#site-content, #site-footer { margin-left: var(--sb); width: auto; max-width: calc(100% - var(--sb)); transition: margin-left .2s ease; }
#site-content { min-height: 100vh; }
.pg-sec { width: 100%; padding: 0; }
.pg-sec > .pg-wrap { width: 100%; }
.pg-wrap { width: 100%; padding: 26px 28px 40px; }

/* ---------- Logos de herramientas ---------- */
.tool-logo { width: 1.1em; height: 1.1em; flex: none; }
.tl-chatgpt { color: #10A37F; } .tl-claude { color: #D97757; } .tl-midjourney { color: var(--text); }

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sb); z-index: 60; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 18px 14px 14px; transition: width .2s ease, transform .25s ease;
  overflow-y: auto; scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 16px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.logo-mark { position: relative; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(140deg, #19b5a2 0%, #0f8b7d 55%, #0a5f56 100%); box-shadow: 0 4px 12px rgba(15,139,125,.32), inset 0 1px 0 rgba(255,255,255,.28); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: .9rem; flex: none; overflow: hidden; }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo:hover .lm-cursor { animation: pg-blink 1s steps(2, start) infinite; }
@keyframes pg-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .logo:hover .lm-cursor { animation: none; } }
.logo .dot { color: var(--accent); background: linear-gradient(90deg, #0f8b7d, #19b5a2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sb-label { font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 14px 10px 6px; }
.sb-nav { list-style: none; margin: 0; padding: 0; }
.sb-nav a, .sb-user-menu a, .sb-user-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 10px; color: var(--muted); font-size: .94rem; font-weight: 400; border: 0; background: none; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.sb-nav a:hover { background: var(--surface-2); color: var(--text); }
.sb-nav a[aria-current="page"], .sb-nav .current-menu-item > a { color: var(--text); font-weight: 600; background: var(--surface-2); }
.sb-nav a[aria-current="page"] i, .sb-nav .current-menu-item > a i { color: var(--accent); }
.sb-nav i { width: 20px; text-align: center; font-size: .95rem; flex: none; }
.sb-badge { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
/* Newsletter en el sidebar: una línea con icono, título, frase corta y flecha */
.sb-nl { display: flex; align-items: center; gap: 10px; margin: 16px 4px 0; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); border: 1px solid transparent; transition: border-color .15s, transform .15s; }
a.sb-nl:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); }
.sb-nl-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: .9rem; }
.sb-nl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-nl-txt b { font-size: .88rem; color: var(--text); }
.sb-nl-txt small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-nl-go { flex: none; color: var(--accent); font-size: .8rem; transition: transform .15s; }
a.sb-nl:hover .sb-nl-go { transform: translateX(3px); }
/* Sidebar plegado: solo el icono */
html.sb-collapsed .sb-nl { justify-content: center; padding: 8px; margin-inline: 0; }
html.sb-collapsed .sb-nl-txt, html.sb-collapsed .sb-nl-go { display: none; }
.sb-stats { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.sb-stats b { display: block; font-size: .98rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-stats span { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sb-activity { margin: 16px 0 0; }
.sb-activity .sb-label { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.sb-activity ul { list-style: none; margin: 0; padding: 0; }
.sb-activity li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: .82rem; }
.sb-activity li:hover { background: var(--surface-2); }
.sb-activity a { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; color: var(--text); }
.sb-activity a i { color: var(--accent); font-size: .78rem; flex: none; }
.sb-activity .ac-like a i { color: #e5484d; }
.sb-activity a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-activity time { font-size: .7rem; color: var(--muted); white-space: nowrap; flex: none; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: pg-live 1.8s infinite; }
@keyframes pg-live { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.sb-user { position: relative; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.sb-user-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: none; border-radius: 12px; cursor: pointer; text-align: left; }
.sb-user-btn:hover, .sb-user.open .sb-user-btn { background: var(--surface-2); }
.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .9rem; color: #fff; background: linear-gradient(135deg, var(--accent), #4f46e5); }
.sb-user-info { min-width: 0; flex: 1; line-height: 1.25; }
.sb-user-info b { display: block; font-size: .9rem; }
.sb-user-info small { display: block; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-chev { font-size: .7rem; color: var(--muted); transition: transform .15s; }
.sb-user.open .sb-user-chev { transform: rotate(180deg); }
.sb-user-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: none; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.sb-user.open .sb-user-menu { display: block; }
.sb-user-menu a, .sb-user-menu button { color: var(--text); font-size: .86rem; gap: 10px; }
.sb-user-menu a:hover, .sb-user-menu button:hover { background: var(--surface-2); }
.sb-user-menu i { width: 18px; text-align: center; color: var(--muted); }

/* Sidebar plegado */
html.sb-collapsed .sb-text, html.sb-collapsed .sb-label, html.sb-collapsed .sb-stats, html.sb-collapsed .sb-activity,
html.sb-collapsed .sb-badge, html.sb-collapsed .logo-text, html.sb-collapsed .sb-user-info, html.sb-collapsed .sb-user-chev { display: none; }
html.sb-collapsed .sb-top { flex-direction: column; padding-bottom: 10px; }
html.sb-collapsed .sb-nav a, html.sb-collapsed .sb-user-btn { justify-content: center; }
html.sb-collapsed .sb-user-menu { right: auto; width: 220px; }

/* Barra superior (solo móvil) */
.mobile-bar { display: none; }
.icon-btn, .tool-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text); flex: none; font-size: .88rem; }
.icon-btn:hover, .tool-btn:hover { border-color: var(--muted); }

/* =========================================================
   LISTADOS
   ========================================================= */
.list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.list-head { flex-direction: row; }
.list-head h1 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.list-sub { color: var(--muted); font-size: .88rem; margin: 4px 0 0; }
.list-tools { display: flex; align-items: center; gap: 8px; }
.seg { display: flex; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 3px; }
.seg a, .seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: .84rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg a:hover, .seg button:hover { color: var(--text); }
.seg [aria-current="true"], .seg [aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--border); }
.dropdown { position: relative; }
.dd-btn { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .86rem; cursor: pointer; white-space: nowrap; list-style: none; }
.dd-btn::-webkit-details-marker { display: none; }
.dd-btn .fa-chevron-down { font-size: .65rem; color: var(--muted); transition: transform .15s; }
.dropdown[open] .dd-btn .fa-chevron-down { transform: rotate(180deg); }
.dd-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); }
.dd-menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: .88rem; }
.dd-menu a:hover { background: var(--surface-2); }
.dd-menu a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Cuadrícula y tarjetas */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-width: 0; }
.card-ico { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: .78rem; }
.card-ico .tool-logo { width: 16px; height: 16px; }
.card-meta { min-width: 0; }
.card-cat { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.card-cat:hover { text-decoration: underline; }
.card-title { margin: 0; font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title a:hover { color: var(--accent); }
.card-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 2rem; }
.card-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-top: 1px solid var(--border); margin-top: auto; }
.cf-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; padding: 7px 10px; border-radius: 999px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.cf-btn:hover { background: var(--surface-2); color: var(--text); }
.cf-btn.on, .cf-btn.on:hover { color: var(--accent); }
.pop i { animation: pg-pop .35s ease; }
@keyframes pg-pop { 50% { transform: scale(1.35); } }
.card-ad { min-height: 260px; box-shadow: none; }
.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 50px 0; }

/* Conversación (prompts de texto) */
.chat { --tint: #eef7f3; --tint-2: #f8fbfa; --brand: #10A37F; position: absolute; inset: 0; padding: 14px 14px 0; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(165deg, var(--tint), var(--tint-2)); overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.chat-claude { --tint: #f6efe6; --tint-2: #fbf8f3; --brand: #D97757; }
.chat-gemini { --tint: #edf2fe; --tint-2: #f7f5fd; --brand: #4285f4; }
:root[data-theme="dark"] .chat { --tint: color-mix(in srgb, var(--brand) 14%, var(--surface)); --tint-2: var(--surface); }
.chat > * { flex-shrink: 0; }
.chat-user { align-self: flex-end; max-width: 86%; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: var(--surface); color: var(--text); font-size: .8rem; line-height: 1.45; box-shadow: 0 1px 2px rgba(16,32,30,.06), 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); }
.chat-user span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.chat-ai { display: flex; gap: 9px; align-items: flex-start; }
.chat-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface); box-shadow: 0 1px 2px rgba(16,32,30,.08), 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); }
.chat-av .tool-logo { width: 15px; height: 15px; }
.chat-ai-body { min-width: 0; }
.chat-name { display: block; font-size: .74rem; font-weight: 600; color: var(--brand); margin-bottom: 2px; }
.chat-ai-text { font-size: .8rem; line-height: 1.55; white-space: pre-wrap; color: var(--text); }
.chat-typing { display: inline-flex; gap: 4px; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--surface); margin-top: 2px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .35; animation: pg-typing 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; } .chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pg-typing { 30% { opacity: 1; transform: translateY(-2px); } 60% { opacity: .35; transform: none; } }
.chat-full { padding: 26px 26px 0; gap: 18px; overflow-y: auto; scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; }
.chat-full::after { content: ""; flex: none; height: 80px; }
.chat-full .chat-user { font-size: .9rem; padding: 12px 16px; max-width: 82%; }
.chat-full .chat-user span { -webkit-line-clamp: 4; }
.chat-full .chat-av { width: 34px; height: 34px; } .chat-full .chat-av .tool-logo { width: 19px; height: 19px; }
.chat-full .chat-name { font-size: .8rem; margin-bottom: 4px; }
.chat-full .chat-ai-text { font-size: .92rem; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .chat-typing span, .dot-live { animation: none; } }

/* Paginación y texto SEO */
.pagination { display: flex; justify-content: center; gap: 6px; margin: 34px 0 10px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 38px; height: 38px; padding: 0 12px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .88rem; }
.pagination .dots { border: 0; background: none; }
.pagination [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.seo-block { max-width: 820px; margin: 48px auto 0; color: var(--muted); font-size: .92rem; }
.seo-block h1 { color: var(--text); font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin: 0 0 14px; }
.seo-block h2 { color: var(--text); font-size: 1.15rem; margin: 22px 0 8px; }
.seo-block h3 { color: var(--text); font-size: 1rem; margin: 18px 0 6px; }
.seo-block h4 { color: var(--text); font-size: .95rem; margin: 14px 0 4px; }
.seo-block ul, .seo-block ol { margin: 0 0 14px; padding-left: 1.3em; }
.seo-block li { margin: 4px 0; }
.seo-block li::marker { color: var(--accent); }
.seo-block strong, .seo-block a { color: var(--text); }
.seo-block a { text-decoration: underline; }
.seo-block details, .faq details { border-bottom: 1px solid var(--border); padding: 12px 0; }
.seo-block summary, .faq summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.seo-block summary::-webkit-details-marker { display: none; }
.seo-block summary::after { content: "+"; color: var(--accent); }
.seo-block details[open] summary::after { content: "–"; }
.seo-block details p { margin: 8px 0 0; }

/* Migas de pan */
.breadcrumbs ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 600; }
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-top .breadcrumbs ol { margin: 0; flex-wrap: nowrap; overflow: hidden; }
.page-top .breadcrumbs li:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   COLECCIONES
   ========================================================= */
.col-section { margin-bottom: 36px; }
.col-section h2 { font-size: 1.15rem; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
.col-section h2 small { font-size: .8rem; font-weight: 400; color: var(--muted); }
/* Índice de colecciones: tarjetas con mosaico 3 × 2 de lo que contienen */
.col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.col-card { display: flex; flex-direction: column; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); transition: border-color .15s, transform .15s, box-shadow .15s; }
.col-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.col-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.col-mosaic > img, .col-tile { display: block; width: 100%; height: auto; aspect-ratio: 1.15; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.col-tile { display: grid; place-items: center; }
.col-tile .tool-logo { width: 30%; height: auto; aspect-ratio: 1; color: #fff; }
/* Prompts de texto en el mosaico: mini conversación */
.col-tile.col-chat { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 7%; padding: 9%; background: var(--surface-2); text-align: left; }
.cc-user { align-self: flex-end; max-width: 88%; padding: 3px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px 8px 2px 8px; font-size: .5rem; line-height: 1.3; color: var(--text); }
.cc-user > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-ai { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 4px 6px; align-items: center; }
.cc-av { grid-row: span 3; align-self: start; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; }
.col-chat .cc-av .tool-logo { width: 9px; height: 9px; color: #fff; }
.cc-ai i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.cc-ai i:nth-of-type(2) { width: 82%; } .cc-ai i:nth-of-type(3) { width: 58%; }
.col-tile-empty { background: var(--surface-2); color: var(--muted); font-size: 1.3rem; opacity: .55; }
.col-tile-empty .tool-logo { width: 26%; color: var(--muted); filter: grayscale(1); }
.col-body { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 14px 8px 6px; }
.col-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: .9rem; flex: none; }
.col-ico .tool-logo { width: 20px; height: 20px; }
.col-txt { display: flex; flex-direction: column; min-width: 0; }
.col-name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-count { font-size: .8rem; color: var(--muted); }
.col-go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: .75rem; transition: background .15s, color .15s; }
.col-card:hover .col-go { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 1100px) { .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .col-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.col-desc { grid-column: 1 / -1; margin-top: 10px; font-size: .84rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.col-hero { display: flex; align-items: center; gap: 16px; }
.col-hero .col-ico { width: 56px; height: 56px; font-size: 1.3rem; }
.col-hero .col-ico .tool-logo { width: 30px; height: 30px; }

/* =========================================================
   PIE, MODAL Y TOAST
   ========================================================= */
.site-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 28px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; gap: 16px; }
.site-foot a:hover { color: var(--accent); }
.pg-modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(10,18,16,.45); display: none; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.pg-modal-bg.open { display: grid; }
.pg-modal { width: min(100%, 520px); background: var(--surface); border-radius: 22px; padding: 22px 24px 26px; box-shadow: var(--shadow-lg); }
.pg-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pg-modal-head h2 { font-size: 1.2rem; }
.pg-modal-close { border: 0; background: none; font-size: 1.1rem; color: var(--muted); cursor: pointer; width: 34px; height: 34px; border-radius: 50%; }
.pg-modal-close:hover { background: var(--surface-2); color: var(--text); }
.share-preview { display: grid; grid-template-columns: 76px 1fr; gap: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 22px; }
.share-thumb { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--surface); display: grid; place-items: center; color: var(--accent); font-size: 1.5rem; }
.share-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-preview p { margin: 0; font-size: .86rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.share-brand { grid-column: 1 / -1; text-align: right; font-weight: 700; font-size: .9rem; }
.share-brand span { color: var(--accent); }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
.share-grid a, .share-grid button { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font-size: .8rem; color: var(--muted); }
.share-grid .sc { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.25rem; transition: transform .15s; }
.share-grid .sc.dark { background: #4b5563; }
.share-grid a:hover .sc, .share-grid button:hover .sc { transform: translateY(-2px); }
.pg-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); opacity: 0; z-index: 120; background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: .88rem; font-weight: 400; transition: opacity .2s, transform .2s; pointer-events: none; }
.pg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.pg-tip { position: fixed; left: 0; top: 0; z-index: 130; max-width: min(340px, calc(100vw - 16px)); padding: 9px 13px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: .84rem; font-weight: 600; line-height: 1.4; box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.pg-tip.show { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px) { .grid, .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  html.sb-collapsed { --sb: 264px; }
  .sidebar { transform: translateX(-100%); width: 260px; box-shadow: var(--shadow-lg); }
  html.sb-open .sidebar { transform: none; }
  #site-content, #site-footer { margin-left: 0; max-width: 100%; }
  #site-header { position: sticky; top: 0; z-index: 50; }
  .mobile-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(10,18,16,.35); display: none; }
  html.sb-open .scrim { display: block; }
  .pg-wrap { padding-top: 16px; }
  .grid, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pg-wrap, .site-foot { padding-left: 16px; padding-right: 16px; }
  .grid, .related-grid { gap: 10px; }
  .card-head { padding: 10px; gap: 8px; }
  .card-ico { width: 26px; height: 26px; }
  .card-title { font-size: .9rem; }
  .cf-btn { padding: 6px 5px; gap: 4px; font-size: .78rem; }
  .chat { padding: 10px 10px 0; gap: 8px; }
  .chat-user { font-size: .72rem; padding: 6px 9px; }
  .chat-av { width: 22px; height: 22px; }
  .chat-ai-text { font-size: .72rem; }
  .list-head { align-items: flex-start; }
  .list-head > *:first-child { min-width: 0; width: 100%; }
  .list-tools { width: 100%; flex-wrap: wrap; }
  .list-tools .dropdown { margin-left: auto; }
  .seg { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
}
@media (max-width: 340px) { .grid, .related-grid { grid-template-columns: minmax(0, 1fr); } }

/* Barra de administración de WordPress (solo usuarios conectados) */
.admin-bar .sidebar { top: 32px; }
@media (max-width: 782px) { .admin-bar .sidebar { top: 46px; } }

/* Filtros de los listados: tipo de contenido a la izquierda; orden y tema a la derecha */
.list-tools { width: 100%; }
.list-tools > .seg { margin-right: auto; }
.list-tools > .seg i { margin-right: 7px; font-size: .85em; opacity: .8; }
.list-tools > .seg [aria-current="true"] i { color: var(--accent); opacity: 1; }

/* Cabecera del sidebar al estilo ChatGPT: logo + lupa + botón de panel */
.sb-top-actions { display: flex; align-items: center; gap: 2px; }
.sb-icon { width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; font-size: 1rem; flex: none; transition: background .15s, color .15s; }
.sb-icon:hover { background: var(--surface-2); color: var(--text); }
html.sb-collapsed .sb-top { gap: 6px; }
html.sb-collapsed .sb-top-actions { flex-direction: column; }
html.sb-collapsed .sb-toggle { display: none; order: -1; }
html.sb-collapsed .sb-top:hover .logo, html.sb-collapsed .sb-top:has(:focus-visible) .logo { display: none; }
html.sb-collapsed .sb-top:hover .sb-toggle, html.sb-collapsed .sb-top:has(:focus-visible) .sb-toggle { display: grid; }
.mb-search { margin-left: auto; }

/* Ventana de búsqueda (lupa / Ctrl K) */
.pg-search-bg { position: fixed; inset: 0; z-index: 110; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(10,18,16,.45); backdrop-filter: blur(3px); }
.pg-search-bg.open { display: flex; }
.pg-search { width: min(100%, 760px); max-height: 76vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ps-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--border); margin: 0; }
.ps-head > i { color: var(--muted); }
.ps-head input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--text); }
.ps-head input::-webkit-search-cancel-button { display: none; }
.ps-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; flex: none; }
.ps-close:hover { background: var(--surface-2); color: var(--text); }
.ps-body { overflow-y: auto; padding: 6px 10px 12px; }
.ps-group { margin: 14px 12px 6px; font-size: .8rem; font-weight: 400; color: var(--muted); }
.ps-item { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; color: var(--text); }
body a.ps-item { color: var(--text); }
.ps-item i { width: 20px; text-align: center; color: var(--muted); flex: none; }
.ps-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-item small { margin-left: auto; padding-left: 12px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.ps-item:hover, .ps-item.active { background: var(--surface-2); }
.ps-item.active i { color: var(--accent); }
body a.ps-all { color: var(--accent); font-weight: 600; margin-top: 6px; }
.ps-all i { color: var(--accent); }
.ps-empty { margin: 0; padding: 18px 12px 8px; color: var(--muted); }
@media (max-width: 640px) { .pg-search-bg { padding: 10px; } .pg-search { max-height: 88vh; } }

/* Ancho del sidebar para logo + lupa + panel en una sola fila */
:root { --sb: 280px; }
.sb-top { padding: 0 2px 16px; gap: 4px; }
.logo { font-size: 1rem; }
.sb-icon { width: 34px; height: 34px; }
@media (max-width: 900px) { html.sb-collapsed { --sb: 280px; } .sidebar { width: 280px; } }
.admin-bar .pg-search-bg { top: 32px; }
@media (max-width: 782px) { .admin-bar .pg-search-bg { top: 46px; } }

/* Logo del sidebar: desplegado solo el rótulo; plegado solo el símbolo */
html:not(.sb-collapsed) .sidebar .logo-mark { display: none; }
.sidebar .logo { font-size: 1.15rem; padding-left: 6px; }
html.sb-collapsed .sidebar .logo { padding-left: 0; }
@media (max-width: 900px) { html.sb-collapsed .sidebar .logo-mark { display: none; } html.sb-collapsed .sidebar .logo-text { display: inline; } }

/* Ficha de usuario siempre abajo del sidebar */
.sb-user { margin-top: auto; }

/* Logo nuevo: el icono SVG ya trae su fondo; rótulo en Fredoka («prompts» oscuro + «.gratis» verde) */
.logo-mark { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.logo > span:not(.logo-mark) { font-family: "Fredoka", var(--font); font-weight: 700; letter-spacing: -.01em; }
.logo .dot { background: none; -webkit-text-fill-color: currentColor; color: #10b39a; }
:root[data-theme="dark"] .logo .dot { color: #2bd4b4; }

/* Rótulo del logo más grande y nítido */
.sidebar .logo { font-size: 1.45rem; padding-left: 4px; }
.logo > span:not(.logo-mark) { letter-spacing: 0; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mobile-bar .logo { font-size: 1.3rem; gap: 10px; }
.mobile-bar .logo-mark { width: 38px; height: 38px; }
html.sb-collapsed .sidebar .logo-mark { width: 40px; height: 40px; }

/* Banda de actividad de la portada (copias · favoritos · compartidos). Clases propias pga-* para no chocar con otros estilos */
.pg-activity { box-sizing: border-box; min-height: 38px; margin: -26px -28px 22px; padding: 6px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-family: var(--font); }
.pg-activity * { box-sizing: border-box; }
.pga-intro { min-width: 170px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pga-metrics { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.pga-metric { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.pga-metric + .pga-metric { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--border); }
.pga-metric strong { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.pga-ico { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--accent); }
.pga-live { min-width: 170px; text-align: right; font-size: 11px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.pga-live i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #20b978; vertical-align: 1px; }
@media (max-width: 900px) { .pg-activity { margin-top: -16px; } }
@media (max-width: 850px) { .pg-activity { padding: 10px 12px; gap: 8px; flex-wrap: wrap; justify-content: center; } .pga-intro, .pga-live { min-width: 0; width: 100%; text-align: center; } }
@media (max-width: 640px) { .pg-activity { margin: -16px -16px 18px; } }
@media (max-width: 430px) { .pga-metric { gap: 4px; font-size: 11px; } .pga-metric strong { font-size: 14px; } .pga-metric + .pga-metric { margin-left: 9px; padding-left: 9px; } }

/* Filtros de los listados: orden en chips a la izquierda; tipo (todos / texto / imagen) en botones redondos a la derecha */
.list-tools { flex-wrap: nowrap; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; margin-right: auto; }
.pg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .84rem; font-weight: 600; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
body a.pg-chip { color: var(--muted); }
.pg-chip i { font-size: .82em; }
body a.pg-chip:hover { border-color: var(--muted); color: var(--text); }
body a.pg-chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
/* Chips que filtran sin recargar (índice de colecciones): mismo aspecto que los enlaces */
button.pg-chip { color: var(--muted); cursor: pointer; font-family: inherit; font-size: .84rem; font-weight: 600; line-height: inherit; }
button.pg-chip:hover { border-color: var(--muted); color: var(--text); }
button.pg-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.pg-type-btns { display: flex; gap: 8px; flex: none; margin-left: auto; }
body a.pg-type { color: var(--muted); }
body a.pg-type:hover { color: var(--text); }
body a.pg-type[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .list-tools { flex-wrap: wrap; } .pg-chips { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .pg-chips::-webkit-scrollbar { display: none; } }

/* Tarjetas: el icono es la herramienta con la que se creó el prompt (su logo y su color) y el título ocupa hasta 2 líneas */
.card-ico.card-tool { width: 34px; height: 34px; color: #fff; }
.card-ico.card-tool .tool-logo { width: 18px; height: 18px; color: #fff; }
.ct-chatgpt { background: #10A37F; }
.ct-claude { background: #D97757; }
.ct-midjourney { background: #111; }
.ct-gemini { background: #e8f0fe; }
:root[data-theme="dark"] .ct-midjourney { background: #2b2b2b; }
:root[data-theme="dark"] .ct-gemini { background: #1d2a44; }
.card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-height: 2.6em; }

/* Títulos de una línea centrados en vertical: la cabecera reserva el alto de 2 líneas */
.card-head { min-height: 68px; }
.card-title { min-height: 0; }

/* Órdenes extra plegados tras una flecha (Más antiguos, gustados, copiados y compartidos) */
.pg-chips:not(.is-open) .pg-chip-more { display: none; }
.pg-chips-toggle { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: .9rem; cursor: pointer; transition: background .15s, color .15s; }
.pg-chips-toggle:hover { background: var(--surface-2); color: var(--text); }
.pg-chips-toggle i { transition: transform .2s; }
.pg-chips.is-open .pg-chips-toggle i { transform: rotate(180deg); }

/* Logos de herramienta de las tarjetas: algo más grandes, sin contorno y centrados (el círculo sigue en 34 px) */
.card-ico.card-tool .tool-logo { display: block; width: 20px; height: 20px; }

/* Banda de actividad (portada, fichas, páginas pilar y favoritos): fuera del contenido, a la derecha del sidebar */
.pg-activity { margin: 0 0 0 var(--sb); transition: margin-left .2s ease; }
@media (max-width: 900px) { .pg-activity { margin: 0; } }
.pg-auth-page .pg-activity { display: none; }

/* Burbuja del prompt en las capturas de texto: máximo 2 líneas (tarjetas y ficha) */
.chat-user span, .chat-full .chat-user span { -webkit-line-clamp: 2; line-clamp: 2; }

/* Imágenes no cuadradas (miniaturas 16:9…): enteras sobre un fondo desenfocado de la propia imagen */
.card-media img.pg-img-bg, .d-media > img.pg-img-bg { position: absolute; inset: 0; object-fit: cover; filter: blur(22px) saturate(1.15); transform: scale(1.15); opacity: .85; }
.card-media img.pg-img-fit, .d-media > img.pg-img-fit { position: relative; object-fit: contain; }

/* Resultados de texto con formato de chat (títulos, listas, tablas y código) */
.chat-ai-text { white-space: normal; }
.chat-ai-text > * { margin: 0 0 .7em; }
.chat-ai-text > :last-child { margin-bottom: 0; }
.chat-ai-text .md-h { font-weight: 700; color: var(--text); line-height: 1.35; margin-top: 1.1em; }
.chat-ai-text .md-h:first-child { margin-top: 0; }
.chat-ai-text .md-h1 { font-size: 1.25em; }
.chat-ai-text .md-h2 { font-size: 1.14em; }
.chat-ai-text .md-h3, .chat-ai-text .md-h4 { font-size: 1.04em; }
.chat-ai-text ul, .chat-ai-text ol { padding-left: 1.35em; }
.chat-ai-text li { margin: .25em 0; }
.chat-ai-text li::marker { color: var(--muted); }
.chat-ai-text hr { border: 0; border-top: 1px solid var(--border); margin: 1.1em 0; }
.chat-ai-text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: .08em .35em; }
.chat-ai-text pre { background: #0f1720; color: #e6edf3; border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: .86em; line-height: 1.55; }
.chat-ai-text pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; white-space: pre; }
.chat-ai-text .md-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.chat-ai-text table { width: 100%; border-collapse: collapse; font-size: .92em; }
.chat-ai-text th, .chat-ai-text td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.chat-ai-text th { background: var(--surface-2); font-weight: 700; }
.chat-ai-text tr:last-child td { border-bottom: 0; }
.chat-ai-text blockquote { margin-left: 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; }

/* Herramientas de imagen por API: FLUX.2 Max (Black Forest Labs) y Recraft V4 Pro */
.tl-flux { color: var(--text); } .tl-recraft { color: #e8542f; }
.oi-flux { background: #111; } .oi-recraft { background: #e8542f; }
.ct-flux { background: #111; } .ct-recraft { background: #e8542f; }
:root[data-theme="dark"] .ct-flux, :root[data-theme="dark"] .oi-flux { background: #2b2b2b; }


/* Tarjetas: «Copiar» destacado a la derecha; Me gusta y Compartir como iconos discretos */
.card-foot { justify-content: flex-start; gap: 2px; padding: 8px 10px; }
.cf-btn.cf-copy { margin-left: auto; gap: 6px; padding: 7px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cf-btn.cf-copy:hover { background: var(--accent); color: var(--accent-ink); }
.cf-lbl { font-weight: 600; }
.cf-copy span { font-weight: 400; opacity: .8; }
@media (max-width: 640px) { .card-foot { padding: 6px 8px; } .cf-btn.cf-copy { padding: 6px 10px; } .cf-lbl { display: none; } }

/* Títulos de las ventanas (compartir, ampliar): párrafo con aspecto de título, no H2, para no ensuciar la estructura de encabezados */
.pg-modal-head .pg-modal-title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }

/* Ventanas (compartir y ampliar): mismo lenguaje que la web — bordes suaves, icono de acento, botón de cerrar circular centrado */
.pg-modal-bg { background: rgba(10,18,16,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pg-modal-bg.open .pg-modal { animation: pgModalIn .22s ease; }
@keyframes pgModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.pg-modal { border: 1px solid var(--border); border-radius: 24px; }
.pg-modal-close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; margin: 0; border-radius: 50%; line-height: 1; font-size: 1rem; background: var(--surface-2); color: var(--muted); transition: background .15s, color .15s; }
.pg-modal-close i { display: block; line-height: 1; }
.pg-modal-close:hover { background: var(--accent-soft); color: var(--accent); }

/* Sidebar · invitados: llamada a registrarse (la ficha de usuario queda para quien tiene sesión) */
.sb-cta { margin-top: auto; padding-top: 12px; }
.sb-cta-card { position: relative; overflow: hidden; padding: 18px 16px 14px; border-radius: 18px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(150deg, #13a291, #0b6a5f 70%); box-shadow: 0 10px 28px rgba(11,106,95,.28); }
.sb-cta-card::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.sb-cta-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.18); color: #fff; font-size: .95rem; margin-bottom: 10px; }
.sb-cta-title { margin: 0 0 8px; font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.sb-cta-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; font-size: .76rem; line-height: 1.35; color: rgba(255,255,255,.9); }
.sb-cta-list li { display: flex; gap: 7px; align-items: flex-start; }
.sb-cta-list i { font-size: .62rem; margin-top: 4px; color: #b7f2e8; }
body .sb-cta-btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 12px; border-radius: 12px; background: #fff; color: #0b6a5f; font-weight: 700; font-size: .88rem; box-shadow: 0 4px 12px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s; }
body .sb-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.18); color: #0b6a5f; }
.sb-cta-login { position: relative; z-index: 1; margin: 10px 0 0; text-align: center; font-size: .76rem; color: rgba(255,255,255,.85); }
body .sb-cta-login a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sb-cta-theme { position: absolute; top: 10px; right: 10px; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: .78rem; cursor: pointer; transition: background .15s; }
.sb-cta-theme:hover { background: rgba(255,255,255,.26); }
.sb-cta-mini { display: none; }
html.sb-collapsed .sb-cta-card { display: none; }
html.sb-collapsed body .sb-cta-mini, html.sb-collapsed .sb-cta-mini { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 14px; color: #fff; background: linear-gradient(150deg, #13a291, #0b6a5f); box-shadow: 0 6px 16px rgba(11,106,95,.3); }
/* CTA compacta: icono junto al título; en pantallas bajas se ocultan las ventajas para que quepa entera */
.sb-cta-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 14px 14px 12px; }
.sb-cta-card > :not(.sb-cta-ico):not(.sb-cta-title):not(.sb-cta-theme) { grid-column: 1 / -1; }
.sb-cta-ico { width: 32px; height: 32px; margin: 0; border-radius: 10px; font-size: .85rem; }
.sb-cta-title { margin: 0; padding-right: 30px; font-size: .92rem; }
.sb-cta-list { margin: 12px 0 12px; gap: 4px; }
.sb-cta-login { margin-top: 8px; }
.sb-cta-theme { top: 8px; right: 8px; width: 28px; height: 28px; }
@media (max-height: 860px) { .sb-cta-list { display: none; } .sb-cta-btn { margin-top: 12px; } }

/* Favoritos bloqueados para invitados */
.is-locked { opacity: .45; }
.is-locked:hover { opacity: .75; }
.sb-lock { margin-left: auto; font-size: .7rem; color: var(--muted); }
html.sb-collapsed .sb-lock { display: none; }
.pg-notice.is-info { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); color: var(--var-ink); border-color: var(--accent); font-weight: 600; }
/* Ficha de usuario del sidebar */
.avatar b { font-weight: 700; }
.avatar { overflow: hidden; } /* foto de perfil redonda en toda la web (sidebar incluido) */
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-user-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }