/* ==========================================================================
   Artículos – Hoja unificada
   - Layout mobile-first
   - Breadcrumbs
   - Meta + Share (SVG inline)
   - Tipografía y contenido
   - Hardening responsive
   ========================================================================== */

/* ========== Variables de color (ajústalas a tu marca) ========== */
:root{
  --azul-primario: #0A2F66;   /* base botones share */
  --azul-primario-hover: #0D3C85;
  --texto-100: #111; 
  --texto-300: #000;
  --texto-500: #6c757d;
  --gris-100: #f9f9f9;
  --gris-150: #f3f4f6;
  --gris-200: #e5e7eb;
  --gris-300: #e0e0e0;
  --azul-brand: #172EEB;

  /* Brand por red */
  --fb:  #1877F2;
  --tw:  #111111; /* X */
  --ln:  #0A66C2;
  --wa:  #25D366;
}

/* ========== Layout base (mobile-first) ========== */
.post-layout{ display:block; }
.main-content{ width:100%; padding:15px; box-sizing:border-box; }
.post-category{ font-size:14px; color:#007bff; margin-bottom:10px; }

/* Títulos y excerpt */
.post-title{
  font-size:24px; line-height:1.2;
  font-weight:800; color:var(--texto-100);
  margin:10px 0;
}
.post-excerpt{
  font-size:14px; line-height:1.4;
  margin-bottom:20px; color:var(--texto-500);
}

/* ========== Breadcrumbs ========== */
.custom-breadcrumbs{ padding-bottom:10px; }
.custom-breadcrumbs a{
  display:inline-flex; align-items:center;
  background-color:var(--gris-300);
  color:#555; font-weight:500; font-size:12px;
  border-radius:15px; padding:5px 10px; margin:0 0;
  white-space:nowrap; text-transform:capitalize;
  transition:background-color .25s ease,color .25s ease;
  text-decoration:none;
}
.custom-breadcrumbs a:hover{ background-color:var(--azul-brand); color:#fff; }

.custom-breadcrumbs span{ color:#7D7F8A; }

.rank-math-breadcrumb .separator{
  display:inline-flex; align-items:center;
  transform:translateY(2px);
  margin: 0 4px;
  font-size:16px; line-height:16px; color:#7D7F8A;
}

/* Home pill como icono */
.custom-breadcrumbs a:first-of-type{
  text-indent:-9999px;
  background: url('https://cdn.inspenet.com/icon-home-breadcrumbs.webp') center/contain no-repeat;
  width:22px; height:26px; padding:0; border-radius:6px;
}

/* Último crumb activo */
.custom-breadcrumbs a:last-of-type{
  background-color:var(--azul-brand);
  color:#fff;
}

/* ========== Meta + Share ========== */
.post-meta{
  display:flex; align-items:center; gap:10px 14px;
  color:var(--texto-500);
  margin-bottom:10px;
  font-size:12px; line-height:1.3;
  flex-wrap:wrap;
}
div.post-meta span > a{ font-weight:700; text-decoration:none; color:inherit; }
div.post-meta span > a:hover{ color:var(--azul-brand); }

/* Share container */
.post-share{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:8px;
}

/* Botón circular (SVG inline con currentColor) */
.post-share .share-btn{
  inline-size:36px; block-size:36px;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:var(--azul-primario);
  text-decoration:none; outline:none;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.post-share .share-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,0,0,.16);
  background:var(--azul-primario-hover);
}
.post-share .share-btn:focus-visible{
  outline:2px solid #8AB4F8; outline-offset:2px;
}

/* SVG tamaño y herencia de color */
.post-share .share-btn svg{ inline-size:18px; block-size:18px; display:block; }
.post-share .share-btn svg, .post-share .share-btn svg *{ fill:currentColor; }

/* Colores por red (si prefieres marcas oficiales) */
.post-share .share-facebook{ background:var(--fb); }
.post-share .share-facebook:hover{ background:#1C82FF; }
.post-share .share-twitter{  background:var(--tw); }
.post-share .share-twitter:hover{ background:#222; }
.post-share .share-linkedin{ background:var(--ln); }
.post-share .share-linkedin:hover{ background:#0D74DE; }
.post-share .share-whatsapp{ background:var(--wa); }
.post-share .share-whatsapp:hover{ background:#2FE07A; }

/* Evitar que icon-fonts interfieran si existen */
.post-share i{ display:none !important; }

/* ========== Media (imagen destacada) ========== */
.post-thumbnail img{ width:100%; height:auto; margin-bottom:20px; display:block; }

/* ========== Contenido y TOC ========== */
.post-content{ font-size:16px; line-height:1.7; color:var(--texto-300); overflow-wrap:anywhere; }
.post-content figure{ margin:0 0 1rem; }

.toc-mobile{ display:block; }
.toc-summary{
  display:flex; justify-content:space-between; align-items:center;
  padding:15px; margin:0; font-size:1.05rem; cursor:pointer; user-select:none;
  border-bottom:1px solid var(--gris-200); background-color:var(--gris-100);
}
.toc-summary::after{
  content:'\25BA'; margin-left:10px; transition:transform .2s ease; transform-origin:center;
}

/* ========== Sticky helpers (sidebar) ========== */
/*.sidebar > .sticksy-dummy-node{ margin:0 !important; padding:0 !important; }
.sidebar .sticky-widget{ margin-top:100px !important; }
.sidebar .sticky-widget > *:first-child{ margin-top:0 !important; }
*/

/* =======================================================================
   HARDENING MOBILE (evitar desbordes y scroll lateral en contenido)
   ======================================================================= */
@media (max-width:1023.98px){
  .insp-container,
  .post-layout,
  .main-content,
  .post-content { max-width:100%; overflow-x:hidden; }

  /* Gutenberg & embebidos */
  .post-content img,
  .post-content figure,
  .post-content .wp-block-image img,
  .post-content .wp-block-embed,
  .post-content .wp-block-video video,
  .post-content iframe,
  .post-content video{
    max-width:100% !important;
    height:auto !important;
  }

  /* Bloques anchos */
  .post-content .alignwide,
  .post-content .alignfull,
  .post-content figure.alignwide,
  .post-content figure.alignfull{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Tablas largas: scroll interno */
  .post-content table{
    display:block; width:100% !important; max-width:100% !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse;
  }

  /* Código: permitimos salto */
  .post-content pre, .post-content code{ white-space:pre-wrap; word-break:break-word; }

  /* Breadcrumb en móvil: permite salto de línea */
  .custom-breadcrumbs a{ white-space:normal; }
  .rank-math-breadcrumb .separator{ flex:0 0 auto; }

  /* Meta + share: orden natural y sin empujar layout */
  .post-meta{ justify-content:flex-start; gap:8px 10px; }
  .post-share{ margin-left:auto; gap:6px; }
  .post-share .share-btn{ inline-size:32px; block-size:32px; }
  .post-share .share-btn svg{ inline-size:18px; block-size:18px; }
}

/* =======================================================================
   Desktop layout
   ======================================================================= */
@media (min-width:1024px){
  .post-layout{
    display:flex; justify-content:space-between; gap:15px;
  }
  /* min-width:0 evita que el contenido empuje la sidebar y cree overflow */
  .main-content{
    flex:1 1 0; min-width:0;
    padding-right:20px; box-sizing:border-box;
  }
  .sidebar{
    flex:0 0 35%;
    min-width:300px; max-width:420px;
    padding-left:20px; box-sizing:border-box;
    position:relative; z-index:1;
  }

  .toc-mobile{ display:none; }
  .post-title{ font-size:32px; }
  .post-meta{ font-size:14px; }
  .post-share .share-btn{ inline-size:40px; block-size:40px; }
  .post-share .share-btn svg{ inline-size:20px; block-size:20px; }
}

/* =======================================================================
   Utilidades pequeñas
   ======================================================================= */
html{ scroll-behavior:smooth; }

/* =========================================================
   Social buttons (Artículos) – mismo look que el Wall
   ========================================================= */

/* Variables (si ya existen en otra hoja, no pasa nada) */
:root{
  --color-principal:#032A53;   /* azul oscuro Inspenet (mismo del wall) */
  --color-borde:#E8E8EA;
  --shadow-xs:0 1px 2px rgba(16,24,40,.06);
  --shadow-sm:0 2px 5px rgba(16,24,40,.10);
}

/* Contenedor de los botones: igual que .social-row del wall */
.post-share.social-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Botón circular (idéntico a .btn-social del wall) */
.post-share .btn-social{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-principal); color:#fff; text-decoration:none;
  box-shadow:0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .08s ease, filter .2s ease;
  outline: none;
}

/* Hover/Focus */
.post-share .btn-social:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.post-share .btn-social:focus-visible{
  box-shadow:0 0 0 3px rgba(22,119,255,.25), 0 1px 2px rgba(16,24,40,.12);
}

/* SVGs blancos y centrados */
.post-share .btn-social svg{
  width:20px; height:20px; display:block; color:#fff; fill:currentColor;
}

/* Tamaño compacto en móviles */
@media (max-width: 1023.98px){
  .post-share .btn-social{ width:40px; height:40px; }
  .post-share .btn-social svg{ width:18px; height:18px; }
}

/* ---------------------------------------------------------
   Ajustes de layout adyacentes (metadatos + share)
   --------------------------------------------------------- */
.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
}

/* Empujar los botones a la derecha si hay espacio, en pantallas grandes */
@media (min-width: 1024px){
  .post-meta{
    justify-content:space-between;
  }
  .post-meta > span{
    margin-right:auto; /* autor/fecha a la izquierda, botones a la derecha */
  }
}

/* ---------------------------------------------------------
   Detalles estéticos para alineación con el resto del diseño
   --------------------------------------------------------- */
.post-share{ margin-top:4px; }
.post-meta span a{ font-weight:700; text-decoration:none; color:inherit; }
.post-meta span a:hover{ text-decoration:underline; }

/* (Opcional) Igualar radios/sombras de tarjetas si usas cajas alrededor */
.single-articulo .aside-card{
  border:1px solid var(--color-borde);
  background:#fff;
  border-radius:14px;
  box-shadow:var(--shadow-xs);
}

/* Respetar reducción de movimiento del usuario */
@media (prefers-reduced-motion: reduce){
  .post-share .btn-social{ transition:none; }
}


/* === Social buttons (compartido Artículos/Noticias) === */
:root{
  --color-principal:#032A53;   /* azul oscuro */
}

/* Fila de botones */
.post-share.social-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Botón circular uniforme (idéntico al Wall) */
.post-share .btn-social{
  width:44px; height:44px;
  border-radius:50%;
  display:inline-flex;
  align-items:center; justify-content:center;
  background:var(--color-principal);
  color:#fff; text-decoration:none;
  box-shadow:0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .08s ease, filter .2s ease;
  outline:none; line-height:1;   /* evita offset vertical por font-size */
}
.post-share .btn-social:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.post-share .btn-social:focus-visible{
  box-shadow:0 0 0 3px rgba(22,119,255,.25), 0 1px 2px rgba(16,24,40,.12);
}

/* SVGs blancos, tamaño fijo, sin heredar reglas de icon-font del tema */
.post-share .btn-social svg{
  display:block;                /* quita baseline gap */
  width:20px; height:20px;      /* tamaño constante */
  fill:currentColor; color:#fff;/* blanco siempre */
  flex:0 0 auto;
}

/* Correcciones que suelen romper WhatsApp/X si hay estilos globales */
.post-share .btn-social *{
  stroke:none;                   /* evita contornos extraños */
  vector-effect:none;
}

/* Meta + share layout */
.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
}
@media (min-width:1024px){
  .post-meta{ justify-content:space-between; }
  .post-meta > span{ margin-right:auto; }
}
.post-share{ margin-top:4px; }
.post-meta span a{ font-weight:700; text-decoration:none; color:inherit; }
.post-meta span a:hover{ text-decoration:underline; }

@media (max-width:1023.98px){
  .post-share .btn-social{ width:40px; height:40px; }
  .post-share .btn-social svg{ width:18px; height:18px; }
}

/* Si tu tema aplica estilos a .post-share a i (icon fonts), neutralízalo */
.post-share a i{ display:none !important; } /* ya no usamos icon-fonts */