/* ============================================================
   publish.css — Obsidian Publish
   Left: 300px · Right: 550px · Centro: Centrado y Optimizado
   ============================================================ */


/* ============================================================
   1. FUENTES
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&family=DM+Serif+Display:ital@0;1&display=swap');


/* ============================================================
   2. TIPOGRAFÍA GLOBAL
   ============================================================ */

body {
  --font-text-theme:        'DM Sans', sans-serif;
  --font-interface-theme:   'DM Sans', sans-serif;
  --font-monospace-theme:   'DM Mono', monospace;
  --font-text-size:         17px;
  --font-ui-smaller:        10px;
  --font-ui-small:          11px;
  --font-ui-medium:         12px;
  --font-ui-large:          14px;
  --font-normal:            400;
  --font-medium:            500;
  --font-semibold:          600;
  --font-bold:              700;
  --line-height-normal:     1.8;
  --line-height-tight:      1.3;
  --p-spacing:              1.1rem;
  --border-width:           1px;
  --radius-s:               4px;
  --radius-m:               8px;
  --radius-l:               14px;
  --radius-xl:              20px;
  --ease:                   cubic-bezier(0.4, 0, 0.2, 1);
  --transition:             0.18s var(--ease);
  --reading-measure:        75ch;
}


/* ============================================================
   3. LAYOUT — Variables oficiales de Publish
   ============================================================ */

.published-container {
  --page-width:              950px; /* Ancho considerable para la lectura */
  --page-side-padding:       40px;
  --page-title-font:         'DM Serif Display', Georgia, serif;
  --sidebar-left-width:      300px; 
  --sidebar-right-width:     550px;
  --header-height:           50px;
  --footer-display:          none;
}


/* ============================================================
   4. MODO CLARO
   ============================================================ */

.theme-light {
  --background-secondary:        #eceae6;
  --background-secondary-alt:    #e6e3de;
  --background-primary:          #fffffe;
  --background-primary-alt:      #f8f6f3;
  --background-modifier-hover:   rgba(99, 91, 255, 0.06);
  --background-modifier-border:  rgba(0, 0, 0, 0.06);
  --text-normal:                 #1c1917;
  --text-muted:                  #79716b;
  --text-faint:                  #b5aea8;
  --text-on-accent:              #ffffff;
  --accent-h:                    246;
  --accent-s:                    100%;
  --accent-l:                    58%;
  --interactive-accent:          hsl(246, 100%, 58%);
  --interactive-accent-hover:    hsl(246, 100%, 48%);
  --interactive-accent-rgb:      99, 91, 255;
  --h1-color:                    #1c1917;
  --h2-color:                    #292524;
  --h3-color:                    #44403c;
  --h4-color:                    #57534e;
  --h5-color:                    #79716b;
  --h6-color:                    #b5aea8;
  --code-background:             #efece8;
  --code-normal:                 #6d28d9;
  --divider-color:               rgba(0, 0, 0, 0.07);
  --shadow-s:                    0 1px 4px rgba(0,0,0,0.05);
  --shadow-m:                    0 4px 24px rgba(0,0,0,0.07);
  --tag-background:              rgba(99, 91, 255, 0.08);
  --tag-color:                   hsl(246, 100%, 48%);
  --tag-border-color:            rgba(99, 91, 255, 0.18);
  --nav-item-color:              #57534e;
  --nav-item-color-hover:        #1c1917;
  --nav-item-color-active:       hsl(246, 100%, 55%);
  --nav-item-background-hover:   rgba(99, 91, 255, 0.07);
  --nav-item-background-active:  rgba(99, 91, 255, 0.1);
  --table-header-bg:             #e7e3f5;
  --table-row-bg:                #fffffe;
  --table-border:                #cdc8c0;
}


/* ============================================================
   5. MODO OSCURO
   ============================================================ */

.theme-dark {
  --background-secondary:        #14131a;
  --background-secondary-alt:    #1a1822;
  --background-primary:          #1c1b22;
  --background-primary-alt:      #232230;
  --background-modifier-hover:   rgba(136, 122, 255, 0.08);
  --background-modifier-border:  rgba(255, 255, 255, 0.07);
  --text-normal:                 #e7e5ea;
  --text-muted:                  #8b86a0;
  --text-faint:                  #4a4658;
  --text-on-accent:              #14131a;
  --accent-h:                    246;
  --accent-s:                    100%;
  --accent-l:                    74%;
  --interactive-accent:          hsl(246, 100%, 74%);
  --interactive-accent-hover:    hsl(246, 100%, 82%);
  --interactive-accent-rgb:      136, 122, 255;
  --h1-color:                    #faf9ff;
  --h2-color:                    #e7e5ea;
  --h3-color:                    #d4d1de;
  --h4-color:                    #a8a4ba;
  --h5-color:                    #8b86a0;
  --h6-color:                    #5a566a;
  --code-background:             #16151c;
  --code-normal:                 #b8acff;
  --divider-color:               rgba(255, 255, 255, 0.08);
  --shadow-s:                    0 1px 4px rgba(0,0,0,0.5);
  --shadow-m:                    0 4px 24px rgba(0,0,0,0.6);
  --tag-background:              rgba(136, 122, 255, 0.12);
  --tag-color:                   hsl(246, 100%, 80%);
  --tag-border-color:            rgba(136, 122, 255, 0.28);
  --nav-item-color:              #a8a4ba;
  --nav-item-color-hover:        #faf9ff;
  --nav-item-color-active:       hsl(246, 100%, 78%);
  --nav-item-background-hover:   rgba(136, 122, 255, 0.08);
  --nav-item-background-active:  rgba(136, 122, 255, 0.14);
  --table-header-bg:             #2a2838;
  --table-row-bg:                #1c1b22;
  --table-border:                #46435a;
}


/* ============================================================
   6. COLORES Y CONTROL STRICTO DE PANELES
   ============================================================ */

.site-body-left-column {
  width: var(--sidebar-left-width) !important;
  min-width: var(--sidebar-left-width) !important;
  max-width: var(--sidebar-left-width) !important;
  background: var(--background-secondary);
  border-right: 1px solid var(--divider-color);
  opacity: 1;
}

.site-body-right-column {
  width: var(--sidebar-right-width) !important;
  background:  var(--background-primary);
  border-left: 1px solid var(--divider-color);
}

/* El contenedor central se asegura de expandirse al 100% del espacio restante */
.site-body-center {
  background: var(--background-primary);
  position:   relative;
  z-index:    1;
  width:      100% !important;
  display:    block !important; /* Eliminamos cualquier rastro de flexbox molesto */
}

/* Forzamos el ancho grande y el centrado en la vista de la nota */
.markdown-preview-view {
  max-width: var(--page-width) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--page-side-padding);
  box-sizing: border-box;
}

/* 🔥 LA SOLUCIÓN: Forzar a los contenedores internos de texto a expandirse */
.markdown-rendered,
.published-section,
.site-body-center .markdown-preview-sizer,
.site-body-center .markdown-rendered .markdown-preview-section {
  max-width: 100% !important;
  width: 100% !important;
}
/* ============================================================
   7. HEADER
   ============================================================ */

.site-header {
  height:                  var(--header-height);
  border-bottom:           1px solid var(--divider-color);
  background:              var(--background-secondary);
  backdrop-filter:         blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header-text {
  font-weight:    var(--font-semibold);
  font-size:      var(--font-ui-large);
  letter-spacing: -0.02em;
}


/* ============================================================
   8. NAV IZQUIERDO (Optimizado para 300px)
   ============================================================ */

.nav-view-outer {
  padding: 8px 0;
}

.nav-view .tree-item-self.mod-collapsible {
  font-size:      10px;
  font-weight:    var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-muted);
  padding:        12px 16px 4px; /* Un poco más de aire lateral */
  margin-top:     6px;
  cursor:         default;
  user-select:    none;
}

.nav-view .tree-item-self {
  position:       relative;
  font-size:      13px;
  color:          var(--nav-item-color);
  padding:        6px 16px; /* Ajustado a 300px */
  border-radius:  var(--radius-s);
  margin:         2px 10px;
  transition:     background var(--transition), color var(--transition);
  white-space:    normal; 
  word-break:     break-word;
  line-height:    1.4;
  display:        flex;
  align-items:    center;
}

.nav-view .tree-item-self:hover {
  background:  var(--nav-item-background-hover);
  color:       var(--nav-item-color-hover);
}

.nav-view .tree-item-self.is-active {
  background:  var(--nav-item-background-active);
  color:       var(--nav-item-color-active);
  font-weight: var(--font-semibold);
}

.nav-view .tree-item-self.is-active::before {
  content:        '';
  position:       absolute;
  left:           0;
  top:            25%;
  height:         50%;
  width:          3px;
  border-radius:  2px;
  background:     var(--interactive-accent);
}


/* ============================================================
   9. TEXTO CENTRAL — Justificado
   ============================================================ */

.markdown-preview-view p {
  text-align: justify;
  hyphens:    auto;
  max-width:  var(--reading-measure);
}

.markdown-preview-view ul,
.markdown-preview-view ol,
.markdown-preview-view blockquote {
  max-width: var(--reading-measure);
}

.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6,
.markdown-preview-view pre,
.markdown-preview-view code,
.markdown-preview-view blockquote,
.markdown-preview-view table,
.markdown-preview-view th,
.markdown-preview-view td {
  text-align: left !important;
  hyphens:    none !important;
}


/* ============================================================
   10. OUTLINE (TOC)
   ============================================================ */

.outline > .tree-item > .tree-item-self {
  font-size:      9px;
  font-weight:    var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--text-faint);
  padding:        12px 12px 5px;
  cursor:         default;
}

.outline .tree-item-self {
  font-size:      12px;
  color:          var(--text-muted);
  padding:        4px 12px;
  border-radius:  var(--radius-s);
  transition:     color var(--transition);
  line-height:    1.5;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.outline .tree-item-self:hover {
  color: var(--text-normal);
}

.outline .tree-item-self.is-active {
  color:       var(--interactive-accent);
  font-weight: var(--font-medium);
}

.outline .tree-item-children {
  padding-left: 10px;
  border-left:  1px solid var(--divider-color);
  margin-left:  14px;
}


/* ============================================================
   11. INTERACTIVE GRAPH (Solución al estirado)
   ============================================================ */

/* Altura real: Obsidian dimensiona su canvas con un ResizeObserver.
   Si forzamos width/height:100% en el canvas, el tamaño CSS deja de
   coincidir con la resolución interna y el arrastre/zoom se descoordina.
   Por eso damos altura al contenedor y NO tocamos el canvas. */
.graph-view-container {
  width:         100% !important;
  height:        320px !important;
  margin:        1.5rem 0 !important;
  border:        1px solid var(--divider-color);
  border-radius: var(--radius-m);
  overflow:      hidden;
  background:    var(--background-secondary);
}

.graph-view-container canvas {
  display: block;
}


/* ============================================================
   12. TÍTULO DE LA NOTA
   ============================================================ */

.published-container .page-title {
  font-family:         var(--page-title-font);
  font-size:           2.8rem;
  font-weight:         400;
  font-style:          italic;
  letter-spacing:      -0.03em;
  line-height:         1.15;
  color:               var(--h1-color);
  text-align:          left;
  margin-bottom:       2rem;
  padding-bottom:      1.1rem;
  background-image:    linear-gradient(90deg, var(--interactive-accent) 0%, transparent 55%);
  background-size:     100% 1px;
  background-repeat:   no-repeat;
  background-position: 0 100%;
}


/* ============================================================
   13. TIPOGRAFÍA
   ============================================================ */

.markdown-preview-view h1 {
  font-family:    var(--page-title-font);
  font-size:      2.1rem;
  font-weight:    400;
  font-style:     italic;
  color:          var(--h1-color);
  letter-spacing: -0.02em;
  line-height:    1.2;
  margin-top:     3rem;
  margin-bottom:  1rem;
}

.markdown-preview-view h2 {
  font-size:      1.45rem;
  font-weight:    var(--font-semibold);
  color:          var(--h2-color);
  letter-spacing: -0.01em;
  margin-top:     2.5rem;
  margin-bottom:  0.6rem;
  display:        flex;
  align-items:    baseline;
  gap:            8px;
}

.markdown-preview-view h2::before {
  content:         '';
  display:         inline-block;
  width:           0.42em;
  height:          0.42em;
  border-radius:   50%;
  background:      var(--interactive-accent);
  flex-shrink:     0;
  align-self:      center;
  transform:       translateY(-0.18em);
}

.markdown-preview-view h3 {
  font-size:      1.15rem;
  font-weight:    var(--font-semibold);
  color:          var(--h3-color);
  margin-top:     2rem;
  margin-bottom:  0.5rem;
}

.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-size:      0.9rem;
  font-weight:    var(--font-semibold);
  color:          var(--h4-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top:     1.5rem;
  margin-bottom:  0.4rem;
}

.markdown-preview-view ul,
.markdown-preview-view ol {
  padding-left:  1.4rem;
  margin-bottom: 1rem;
  line-height:   var(--line-height-normal);
}

.markdown-preview-view li {
  margin-bottom: 0.35rem;
}


/* ============================================================
   14. LINKS
   ============================================================ */

.markdown-preview-view .internal-link {
  color:           var(--interactive-accent);
  text-decoration: none;
  border-bottom:   1.5px solid transparent;
  font-weight:     var(--font-medium);
  transition:      border-color var(--transition);
}

.markdown-preview-view .internal-link:hover {
  border-bottom-color: var(--interactive-accent);
}

.markdown-preview-view .internal-link.is-unresolved {
  color:         var(--text-faint);
  font-weight:   var(--font-normal);
  border-bottom: 1px dashed var(--text-faint);
}

.markdown-preview-view a.external-link {
  color:           var(--interactive-accent);
  text-decoration: none;
  border-bottom:   1px dashed color-mix(in srgb, var(--interactive-accent) 55%, transparent);
  transition:      border-bottom-color var(--transition), border-bottom-style var(--transition);
}

.markdown-preview-view a.external-link:hover {
  border-bottom-color: var(--interactive-accent);
  border-bottom-style: solid;
}


/* ============================================================
   15. CÓDIGO
   ============================================================ */

.markdown-preview-view code {
  font-family:   var(--font-monospace-theme);
  font-size:     0.85em;
  background:    var(--code-background);
  color:         var(--code-normal);
  padding:       0.15em 0.45em;
  border-radius: var(--radius-s);
}

.markdown-preview-view pre {
  background:    var(--code-background);
  border:        1px solid var(--divider-color);
  border-radius: var(--radius-l);
  padding:       1.2rem 1.5rem;
  overflow-x:    auto;
  line-height:   1.65;
  box-shadow:    var(--shadow-s);
}

.markdown-preview-view pre code {
  background: transparent;
  color:      var(--text-normal);
  padding:    0;
  font-size:  0.88em;
}


/* ============================================================
   16. BLOCKQUOTES Y CALLOUTS
   ============================================================ */

.markdown-preview-view blockquote {
  border:      none;
  border-left: 2px solid var(--interactive-accent);
  padding:     0.5rem 0 0.5rem 1.3rem;
  margin:      1.3rem 0;
  color:       var(--text-muted);
  font-size:   1.05em;
}

.callout {
  border-radius: var(--radius-m);
  border:        1px solid rgba(var(--callout-color), 0.2);
  border-left:   3px solid rgb(var(--callout-color));
  background:    rgba(var(--callout-color), 0.05);
  padding:       0.9rem 1.1rem;
  margin:        1.3rem 0;
}

.callout-title {
  font-size:      1rem;
  font-weight:    var(--font-bold);
  letter-spacing: 0.01em;
  margin-bottom:  0.45rem;
  line-height:    1.3;
}

.callout-content {
  font-size:   0.92em;
  color:       var(--text-muted);
  line-height: 1.65;
}


/* ============================================================
   17. TABLAS
   ============================================================ */

.markdown-preview-view table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  margin:          1.5rem 0;
  font-size:       0.9em;
  border:          1px solid var(--table-border);
  border-radius:   var(--radius-m);
  overflow:        hidden;
  box-shadow:      var(--shadow-s);
}

/* Encabezado en banda diferenciada (más clara en oscuro) */
.markdown-preview-view thead th {
  background:     var(--table-header-bg);
  color:          var(--text-normal);
  font-weight:    var(--font-semibold);
  font-size:      var(--font-ui-small);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding:        0.7rem 1rem;
  text-align:     left;
  border-bottom:  1px solid var(--table-border);
}

/* Líneas verticales entre columnas (siempre visibles) */
.markdown-preview-view thead th:not(:last-child),
.markdown-preview-view tbody td:not(:last-child) {
  border-right: 1px solid var(--table-border);
}

/* Filas uniformes (sin alternado) + líneas horizontales grises */
.markdown-preview-view tbody td {
  padding:       0.6rem 1rem;
  background:    var(--table-row-bg);
  border-bottom: 1px solid var(--table-border);
  color:         var(--text-normal);
  line-height:   1.6;
}

.markdown-preview-view tbody tr:last-child td {
  border-bottom: none;
}

.markdown-preview-view tbody tr:hover td {
  background: var(--background-modifier-hover);
}


/* ============================================================
   18. IMÁGENES
   ============================================================ */

.markdown-preview-view img {
  max-width:     100%;
  border-radius: var(--radius-l);
  box-shadow:    var(--shadow-m);
  margin:        1.2rem 0;
  display:       block;
}


/* ============================================================
   19. SEPARADORES
   ============================================================ */

.markdown-preview-view hr {
  border:     none;
  height:     1px;
  background: linear-gradient(90deg, var(--interactive-accent), transparent);
  margin:     2.5rem 0;
  opacity:    0.3;
}


/* ============================================================
   20. TAGS
   ============================================================ */

.tag {
  font-size:       var(--font-ui-smaller);
  font-weight:     var(--font-medium);
  letter-spacing:  0.04em;
  background:      var(--tag-background);
  color:           var(--tag-color);
  border:          1px solid var(--tag-border-color);
  border-radius:   100px;
  padding:         2px 8px;
  text-decoration: none;
}


/* ============================================================
   21. BACKLINKS
   ============================================================ */

.backlinks {
  margin-top:  3.5rem;
  padding-top: 1.5rem;
  border-top:  1px solid var(--divider-color);
}

.backlinks .backlink-pane-header {
  font-size:      9px;
  font-weight:    var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--text-faint);
  margin-bottom:  1rem;
}


/* ============================================================
   22. BÚSQUEDA
   ============================================================ */

.search-input-container input {
  background:    var(--background-secondary);
  border:        1px solid var(--divider-color);
  border-radius: var(--radius-m);
  color:         var(--text-normal);
  font-size:     var(--font-ui-small);
  padding:       5px 9px;
  width:         100%;
  transition:    border-color var(--transition), box-shadow var(--transition);
}

.search-input-container input:focus {
  outline:      none;
  border-color: var(--interactive-accent);
  box-shadow:   0 0 0 3px rgba(var(--interactive-accent-rgb), 0.15);
}


/* ============================================================
   23. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  {
  background:        rgba(var(--interactive-accent-rgb), 0.45);
  border-radius:     100px;
  border:            2px solid transparent;
  background-clip:   padding-box;
  min-height:        40px;
}
::-webkit-scrollbar-thumb:hover {
  background:      rgba(var(--interactive-accent-rgb), 0.75);
  background-clip: padding-box;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--interactive-accent-rgb), 0.45) transparent;
}


/* ============================================================
   24. RESPONSIVE
   ============================================================ */

/* La columna derecha (graph + TOC) se estrecha de forma proporcional
   antes de desaparecer, evitando saltos bruscos desde 550px. */
@media (max-width: 1500px) {
  .published-container {
    --sidebar-right-width: 420px;
  }
}

@media (max-width: 1300px) {
  .published-container {
    --sidebar-left-width:  260px;
    --sidebar-right-width: 360px;
  }
}

/* Sin espacio para el panel derecho: se oculta graph + TOC. */
@media (max-width: 1100px) {
  .published-container {
    --sidebar-right-width: 0px;
    --sidebar-left-width:  250px;
  }
  .site-body-right-column {
    display: none !important;
  }
}

/* Tablet: navegación lateral más estrecha y menos padding lateral. */
@media (max-width: 900px) {
  .published-container {
    --sidebar-left-width:  230px;
    --page-side-padding:   28px;
  }
}

/* Móvil: se oculta la navegación, contenido a ancho completo. */
@media (max-width: 768px) {
  .published-container {
    --sidebar-left-width:  0px;
    --sidebar-right-width: 0px;
    --page-side-padding:   20px;
  }
  .site-body-left-column {
    display: none !important;
  }
  /* En pantallas pequeñas el justificado crea huecos feos:
     pasamos a alineación izquierda solo en móvil. */
  .markdown-preview-view p {
    text-align: left;
    hyphens:    none;
  }
  .published-container .page-title { font-size: 2rem; }
  .markdown-preview-view h1 { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .published-container { --page-side-padding: 16px; }
  body { --font-text-size: 16px; }
}

/* Respeta la preferencia de movimiento reducido del sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation:  none !important;
    scroll-behavior: auto !important;
  }
}




/* ============================================================
   25. SELECCIÓN DE TEXTO
   ============================================================ */

::selection {
  background: rgba(var(--interactive-accent-rgb), 0.22);
  color:      var(--text-normal);
}

/* ============================================================
   26. FOCO VISIBLE (accesibilidad por teclado)
   ============================================================ */

a:focus-visible,
button:focus-visible,
.nav-view .tree-item-self:focus-visible,
.outline .tree-item-self:focus-visible,
.search-input-container input:focus-visible {
  outline:        2px solid var(--interactive-accent);
  outline-offset: 2px;
  border-radius:  var(--radius-s);
}

:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   27. CALLOUTS POR TIPO
   ============================================================ */

.callout {
  --callout-accent: var(--interactive-accent-rgb);
}

.callout[data-callout="info"],
.callout[data-callout="note"]     { --callout-accent: var(--interactive-accent-rgb); }
.callout[data-callout="tip"],
.callout[data-callout="success"],
.callout[data-callout="check"]    { --callout-accent: 16, 185, 129; }
.callout[data-callout="warning"],
.callout[data-callout="caution"]  { --callout-accent: 245, 158, 11; }
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="bug"]      { --callout-accent: 239, 68, 68; }
.callout[data-callout="question"],
.callout[data-callout="quote"]    { --callout-accent: 139, 92, 246; }

.callout {
  border:      1px solid rgba(var(--callout-accent), 0.25);
  border-left: 3px solid rgb(var(--callout-accent));
  background:  rgba(var(--callout-accent), 0.06);
}

.callout-title { color: rgb(var(--callout-accent)); }
.callout-icon svg { stroke: rgb(var(--callout-accent)); }



/* ============================================================
   28. BARRA DE REDES SOCIALES (inyectada por publish.js)
   ============================================================ */

.social-links {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             10px;
  margin:          1.25rem 0 0.25rem;
  padding:         0 1rem;
}

.social-link {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  border-radius:    var(--radius-m);
  color:            var(--text-muted);
  background:       var(--background-secondary);
  border:           1px solid var(--divider-color);
  transition:       color var(--transition), background var(--transition),
                    border-color var(--transition), transform var(--transition);
}

.social-link svg {
  width:   17px;
  height:  17px;
  fill:    currentColor;
}

.social-link:hover {
  color:        var(--text-on-accent);
  background:   var(--interactive-accent);
  border-color: var(--interactive-accent);
  transform:    translateY(-2px);
}


/* ============================================================
   29. BOTÓN OCULTAR PANEL IZQUIERDO (inyectado por publish.js)
   ============================================================ */

.left-toggle-btn {
  position:         fixed;
  top:              9px;
  left:             12px;
  z-index:          1000;
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            32px;
  height:           32px;
  border:           1px solid var(--divider-color);
  border-radius:    var(--radius-s);
  background:       var(--background-secondary);
  color:            var(--text-muted);
  cursor:           pointer;
  transition:       color var(--transition), background var(--transition),
                    border-color var(--transition);
}

.left-toggle-btn:hover {
  color:        var(--interactive-accent);
  border-color: var(--interactive-accent);
  background:   var(--background-modifier-hover);
}

.left-toggle-btn svg {
  width:  16px;
  height: 16px;
  fill:   none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Estado colapsado: oculta el panel y reclama el espacio */
.published-container.is-left-collapsed {
  --sidebar-left-width: 0px;
}

.published-container.is-left-collapsed .site-body-left-column {
  display: none !important;
}


/* ============================================================
   30. BARRA SOCIAL EN EL PANEL IZQUIERDO (variante)
   ============================================================ */

.social-links.social-links--sidebar {
  margin:      auto 0 4px;          /* empuja la barra al fondo del panel */
  padding-top: 16px;
  gap:         8px;
}

.social-links.social-links--sidebar .social-link {
  width:  32px;
  height: 32px;
}

.social-links.social-links--sidebar .social-link svg {
  width:  15px;
  height: 15px;
}

/* El inner del panel izquierdo en columna para anclar la barra abajo */
.site-body-left-column-inner {
  display:        flex;
  flex-direction: column;
  min-height:     100%;
}


/* ============================================================
   31. BANNER SUPERIOR (callout fijo para mensajes especiales)
   ============================================================ */

.top-banner {
  position:        sticky;
  top:             0;
  z-index:         50;
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         8px 16px;
  font-size:       0.85em;
  color:           var(--text-muted);
  background:      rgba(var(--interactive-accent-rgb), 0.07);
  border-bottom:   1px solid rgba(var(--interactive-accent-rgb), 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.top-banner::before {
  content:        '';
  width:          6px;
  height:         6px;
  border-radius:  50%;
  flex-shrink:    0;
  background:     var(--interactive-accent);
}

.top-banner a {
  color:           var(--interactive-accent);
  text-decoration: none;
  border-bottom:   1px solid transparent;
}

.top-banner a:hover { border-bottom-color: var(--interactive-accent); }

/* ============================================================
   FIN DEL ARCHIVO publish.css
   ============================================================ */