/* ====================================================================
   SolucionaPC · articulos.css — Fase 2
   ====================================================================
   Reglas SOLO para los componentes nuevos que no existían en la Fase 1
   (badge de dificultad, cabecera de artículo, tabla de contenidos,
   bloques info/consejo/advertencia/nota, código, galería, vídeo,
   descargas, compartir, comentarios, filtros y paginación).

   No se redefine aquí NINGUNA variable ni clase ya existente: se
   reutilizan tal cual --primary, --text, --border, --radius-*,
   --shadow-*, --transition, etc., definidas en css/style.css.
==================================================================== */

.sr-only{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

/* ---------- Badge de dificultad ---------- */
.badge-dificultad{
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
}
.dificultad-facil{ background:rgba(52,199,89,.12); color:#1f9c46; }
.dificultad-intermedio{ background:rgba(255,159,10,.14); color:#b3690a; }
.dificultad-avanzado{ background:rgba(255,59,48,.12); color:#c22a20; }
body.dark-mode .dificultad-facil{ color:#4fdc7a; }
body.dark-mode .dificultad-intermedio{ color:#ffb444; }
body.dark-mode .dificultad-avanzado{ color:#ff6c62; }

/* ---------- Cabecera de artículo ---------- */
.articulo{ padding:48px 0 80px; }

.articulo-header{ max-width:820px; margin:0 auto 40px; }

.articulo-header h1{
    font-size:clamp(1.8rem, 3.2vw, 2.6rem);
    line-height:1.2;
    margin-bottom:16px;
}

.articulo-resumen{
    font-size:1.15rem;
    color:var(--text-secondary);
    margin-bottom:22px;
}

.articulo-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    padding:16px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    color:var(--text-secondary);
    font-size:.9rem;
    margin-bottom:22px;
}

/* ---------- Compartir ---------- */
.compartir{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.compartir-titulo{ font-weight:600; font-size:.9rem; margin-right:4px; }
.compartir-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:40px; height:40px;
    border-radius:50%;
    background:var(--background-secondary);
    color:var(--text);
    border:1px solid var(--border);
    transition:var(--transition);
    cursor:pointer;
}
.compartir-btn svg{ width:18px; height:18px; }
.compartir-btn:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); }
.compartir-copiar{ width:auto; padding:0 16px; border-radius:999px; }
.compartir-copiar-texto{ font-size:.85rem; font-weight:500; }
.compartir-copiar.is-copiado{ background:var(--success); color:#fff; border-color:var(--success); }

/* ---------- Layout: contenido + tabla de contenidos ---------- */
.articulo-layout{
    display:grid;
    grid-template-columns:180px minmax(0,800px);
    gap:48px;
    justify-content:center;
    max-width:1080px;
    margin:0 auto;
}
.articulo-contenido{ grid-column:2; }
.articulo-toc{ grid-column:1; grid-row:1; }

.articulo-toc{
    position:sticky;
    top:calc(var(--header-height, 81px) + 16px);
    align-self:start;
    font-size:.88rem;
    max-height:calc(100vh - var(--header-height, 81px) - 40px);
    overflow-y:auto;
}
.articulo-toc:empty{ display:none; }
.articulo-toc .toc-titulo{
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-size:.75rem;
    color:var(--text-secondary);
    margin-bottom:12px;
}
.articulo-toc ul{ list-style:none; border-left:2px solid var(--border); }
.toc-caja h2{
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-secondary);
    margin:0 0 12px;
}
.articulo-toc li{ margin-bottom:2px; }
.articulo-toc li a{
    display:block;
    padding:6px 0 6px 14px;
    font-size:.82rem;
    line-height:1.4;
    color:var(--text-secondary);
}
.articulo-toc li a:hover{ color:var(--primary); }
.articulo-toc li a{
    display:block;
    padding:6px 0 6px 16px;
    margin-left:-2px;
    border-left:2px solid transparent;
    color:var(--text-secondary);
    transition:var(--transition);
}
.articulo-toc li a:hover{ color:var(--primary); }
.articulo-toc li a.is-activo{ color:var(--primary); border-left-color:var(--primary); font-weight:600; }
.articulo-toc li.toc-h3 a{ padding-left:30px; font-size:.85em; }

/* Botón de tabla de contenidos solo visible en móvil (se rellena por JS) */
.toc-toggle-movil{ display:none; }

/* ---------- Contenido del artículo (tipografía) ---------- */
.articulo-contenido{ max-width:800px; }
.pagina-simple .articulo-contenido{ margin:0 auto; }
.articulo-contenido h2{
    font-size:1.5rem;
    margin:44px 0 16px;
    scroll-margin-top:calc(var(--header-height, 81px) + 16px);
}
.articulo-contenido h3{
    font-size:1.2rem;
    margin:32px 0 12px;
    scroll-margin-top:calc(var(--header-height, 81px) + 16px);
}
.articulo-contenido p{ margin-bottom:18px; line-height:1.75; }
.articulo-contenido ul, .articulo-contenido ol{ margin:0 0 18px 22px; line-height:1.75; }
.articulo-contenido li{ margin-bottom:6px; }
.articulo-contenido a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
body.dark-mode .articulo-contenido a{ color:var(--primary); }
.articulo-contenido img{ max-width:100%; border-radius:var(--radius-medium); margin:20px 0; }

/* ---------- Bloques: info / consejo / advertencia / nota ---------- */
.bloque{
    padding:20px 24px;
    border-radius:var(--radius-medium);
    margin:24px 0;
    border-left:4px solid;
}
.bloque p{ margin-bottom:0; }
.bloque p + p{ margin-top:10px; }

.bloque-info{
    background:rgba(0,113,227,.06);
    border-color:var(--primary);
}
.bloque-consejo{
    background:rgba(52,199,89,.08);
    border-color:var(--success);
}
.bloque-advertencia{
    background:rgba(255,159,10,.1);
    border-color:var(--warning);
}
.bloque-nota{
    background:var(--background-secondary);
    border-color:var(--text-secondary);
}
.bloque-exito{
    background:rgba(52,199,89,.08);
    border-color:var(--success);
}
.bloque-exito p::before{
    content:"";
    display:inline-block;
    width:16px; height:16px;
    margin-right:6px;
    vertical-align:-2px;
    background:var(--success);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    border-radius:50%;
}

body.dark-mode .bloque-info{ background:rgba(10,132,255,.1); }
body.dark-mode .bloque-consejo{ background:rgba(52,199,89,.1); }
body.dark-mode .bloque-advertencia{ background:rgba(255,159,10,.12); }
body.dark-mode .bloque-exito{ background:rgba(52,199,89,.1); }

/* ---------- Código ---------- */
.articulo-contenido pre{
    position:relative;
    background:#1D1D1F;
    color:#F5F5F7;
    padding:20px 24px;
    border-radius:var(--radius-medium);
    overflow-x:auto;
    margin:20px 0;
    font-size:.88rem;
    line-height:1.6;
    border-top:3px solid #48484A;
}
body.dark-mode .articulo-contenido pre{
    background:#0A0A0B;
    border:1px solid var(--border);
    border-top:3px solid #48484A;
}

/* Cajas de comandos: la clase language-X ya existe en el contenido tal
   cual se escribió — aquí se le da tratamiento visual propio por
   consola, sin tener que reescribir ningún artículo. */
.articulo-contenido pre:has(code[class*="language-powershell"]){
    border-top-color:#012456;
    padding-top:44px;
}
.articulo-contenido pre:has(code[class*="language-powershell"])::before{
    content:"PowerShell";
    position:absolute;
    top:0; left:0;
    padding:6px 16px;
    font-size:.72rem;
    font-weight:600;
    font-family:"Poppins",sans-serif;
    letter-spacing:.02em;
    color:#8AB4F8;
    background:#012456;
    border-radius:0 0 8px 0;
}
.articulo-contenido pre:has(code[class*="language-cmd"]),
.articulo-contenido pre:has(code[class*="language-batch"]){
    border-top-color:#4D4D4D;
    padding-top:44px;
}
.articulo-contenido pre:has(code[class*="language-cmd"])::before,
.articulo-contenido pre:has(code[class*="language-batch"])::before{
    content:"Símbolo del sistema";
    position:absolute;
    top:0; left:0;
    padding:6px 16px;
    font-size:.72rem;
    font-weight:600;
    font-family:"Poppins",sans-serif;
    letter-spacing:.02em;
    color:#D8D8D8;
    background:#3A3A3C;
    border-radius:0 0 8px 0;
}
.articulo-contenido pre:has(code[class*="language-bash"]),
.articulo-contenido pre:has(code[class*="language-linux"]),
.articulo-contenido pre:has(code[class*="language-sh"]){
    border-top-color:#E95420;
    padding-top:44px;
}
.articulo-contenido pre:has(code[class*="language-bash"])::before,
.articulo-contenido pre:has(code[class*="language-linux"])::before,
.articulo-contenido pre:has(code[class*="language-sh"])::before{
    content:"Terminal";
    position:absolute;
    top:0; left:0;
    padding:6px 16px;
    font-size:.72rem;
    font-weight:600;
    font-family:"Poppins",sans-serif;
    letter-spacing:.02em;
    color:#FFB399;
    background:#E95420;
    border-radius:0 0 8px 0;
}
.articulo-contenido code{
    font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.articulo-contenido :not(pre) > code{
    background:var(--background-secondary);
    color:var(--primary);
    padding:2px 7px;
    border-radius:6px;
    font-size:.9em;
    overflow-wrap:break-word;
    word-break:break-word;
}

/* ---------- Tablas comparativas ---------- */
.articulo-contenido table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
    border-collapse:collapse;
    margin:28px 0;
    font-size:.92rem;
    border:1px solid var(--border);
    border-radius:var(--radius-medium);
}
.articulo-contenido th,
.articulo-contenido td{
    padding:14px 18px;
    text-align:left;
    border-bottom:1px solid var(--border);
}
.articulo-contenido th{
    background:var(--background-secondary);
    font-weight:700;
    color:var(--text);
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.articulo-contenido td{ color:var(--text-secondary); }
.articulo-contenido tr:last-child td{ border-bottom:none; }
.articulo-contenido tbody tr{ transition:background var(--transition-fast); }
.articulo-contenido tbody tr:hover{ background:var(--background-secondary); }
.articulo-contenido td strong{ color:var(--text); }

/* Columna "recomendado": <td class="es-recomendado"> */
.articulo-contenido td.es-recomendado,
.articulo-contenido th.es-recomendado{
    background:rgba(52,199,89,.08);
    color:var(--text);
    font-weight:600;
}
.articulo-contenido th.es-recomendado{ color:#1f9c46; }

/* ---------- Timeline (para procesos con pasos en el tiempo, no listas
   genéricas) ---------- */
.timeline{
    position:relative;
    margin:32px 0;
    padding-left:32px;
    border-left:2px solid var(--border);
}
.timeline-item{
    position:relative;
    padding-bottom:28px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
    content:"";
    position:absolute;
    left:-38px;
    top:2px;
    width:14px; height:14px;
    border-radius:50%;
    background:var(--primary);
    border:3px solid var(--background);
    box-shadow:0 0 0 2px var(--primary);
}
.timeline-item time{
    display:block;
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--primary);
    margin-bottom:4px;
}
.timeline-item h4{
    font-size:1rem;
    font-weight:600;
    margin-bottom:4px;
    color:var(--text);
}
.timeline-item p{ margin-bottom:0; font-size:.95rem; }

/* ---------- Separador elegante ---------- */
.separador{
    display:flex;
    align-items:center;
    gap:16px;
    margin:44px 0;
    color:var(--text-secondary);
}
.separador::before,
.separador::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}
.separador svg{ width:18px; height:18px; opacity:.5; flex-shrink:0; }

/* ---------- Tarjeta destacada (para una recomendación o resumen que
   debe distinguirse claramente del resto del cuerpo) ---------- */
.tarjeta-destacada{
    display:flex;
    gap:20px;
    align-items:flex-start;
    margin:32px 0;
    padding:28px;
    border-radius:var(--radius-large);
    background:linear-gradient(155deg, rgba(0,113,227,.06), rgba(0,113,227,.02));
    border:1px solid rgba(0,113,227,.18);
}
.tarjeta-destacada-icono{
    flex-shrink:0;
    width:44px; height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:#fff;
}
.tarjeta-destacada-icono svg{ width:22px; height:22px; }
.tarjeta-destacada h4{
    font-size:1.05rem;
    margin-bottom:6px;
    color:var(--text);
}
.tarjeta-destacada p{ margin-bottom:0; }
body.dark-mode .tarjeta-destacada{
    background:linear-gradient(155deg, rgba(10,132,255,.12), rgba(10,132,255,.03));
    border-color:rgba(10,132,255,.25);
}

/* ---------- Vídeo (facade ligero, sin cargar YouTube hasta el clic) ---------- */
.articulo-video{ margin:28px 0; }
.video-facade{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border-radius:var(--radius-medium);
    overflow:hidden;
    border:none;
    cursor:pointer;
    background:#000;
}
.video-facade img{ width:100%; height:100%; object-fit:cover; opacity:.8; }
.video-play{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:72px; height:72px;
    display:flex; align-items:center; justify-content:center;
    background:var(--primary);
    color:#fff;
    border-radius:50%;
    font-size:1.4rem;
    box-shadow:var(--shadow-large);
}
.articulo-video iframe{
    width:100%; aspect-ratio:16/9; border-radius:var(--radius-medium); border:none;
}

/* ---------- Galería + lightbox ---------- */
.articulo-galeria{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:12px;
    margin:24px 0;
}
.galeria-item{
    padding:0; border:none; cursor:pointer;
    border-radius:var(--radius-small);
    overflow:hidden;
    aspect-ratio:1;
}
.galeria-item img{ width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.galeria-item:hover img{ transform:scale(1.06); }

.lightbox-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.85);
    display:flex; align-items:center; justify-content:center;
    z-index:1000; padding:24px;
}
.lightbox-overlay img{ max-width:100%; max-height:85vh; border-radius:var(--radius-small); }
.lightbox-cerrar{
    position:absolute; top:20px; right:24px;
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.15); color:#fff; border:none;
    font-size:1.5rem; cursor:pointer;
}
.lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px; border-radius:50%;
    background:rgba(255,255,255,.15); color:#fff; border:none;
    font-size:1.4rem; cursor:pointer;
}
.lightbox-prev{ left:20px; } .lightbox-next{ right:20px; }

/* ---------- Descargas ---------- */
.articulo-descargas ul{ list-style:none; margin:0; display:flex; flex-direction:column; gap:10px; }
.articulo-descargas a{
    display:flex; align-items:center; gap:12px;
    padding:16px 20px;
    background:var(--background-secondary);
    border-radius:var(--radius-medium);
    color:var(--text);
    text-decoration:none;
    transition:var(--transition);
}
.articulo-descargas a:hover{ background:var(--border); }
.articulo-descargas a svg{ width:20px; height:20px; flex-shrink:0; color:var(--primary); }
.articulo-descargas em{ color:var(--text-secondary); font-style:normal; font-size:.85em; }

/* ---------- FAQ / relacionados / comentarios: títulos de sección ---------- */
.faq-section{
    max-width:820px;
    margin:56px auto 0;
    padding-top:40px;
    border-top:1px solid var(--border);
}
.faq-section h2{
    font-size:1.5rem; margin-bottom:24px;
}
.form-status.is-error{ color:var(--danger); }

/* ---------- Selector de idioma ---------- */
.selector-idioma{ position:relative; }
.selector-idioma-btn{
    display:flex; align-items:center; gap:6px;
    background:var(--background-secondary);
    border:1px solid var(--border);
    border-radius:999px;
    padding:8px 14px;
    color:var(--text);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
}
.selector-idioma-lista{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:180px;
    background:var(--surface,#fff);
    border:1px solid var(--border);
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-large);
    list-style:none;
    padding:6px;
    z-index:60;
}
.selector-idioma.is-abierto .selector-idioma-lista{ display:block; }
.selector-idioma-lista a{
    display:block;
    padding:10px 14px;
    border-radius:var(--radius-small);
    color:var(--text);
    font-size:.9rem;
}
.selector-idioma-lista a:hover{ background:var(--background-secondary); }
.selector-idioma-lista a[aria-current="true"]{ color:var(--primary); font-weight:600; }

/* ---------- Aviso de traducción pendiente ---------- */
.aviso-sin-traducir{
    max-width:820px;
    margin:0 auto 24px;
    padding:16px 22px;
    background:rgba(255,159,10,.1);
    border-left:4px solid var(--warning);
    border-radius:var(--radius-medium);
    font-size:.92rem;
}

/* ---------- Accesibilidad: reduce movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce){
    .galeria-item img,
    .compartir-btn{
        transition:none;
    }
    .galeria-item:hover img{ transform:none; }
    .compartir-btn:hover{ transform:none; }
}

/* ---------- Foco visible por teclado en los componentes nuevos ---------- */
.galeria-item:focus-visible,
.video-facade:focus-visible,
.toc-toggle-movil:focus-visible,
.compartir-copiar:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
}
.articulo-toc li a:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
    border-radius:4px;
}

/* ---------- Imagen de portada (opcional; si el artículo no tiene, no pasa nada) ---------- */
.articulo-portada{
    width:100%;
    max-height:340px;
    object-fit:cover;
    border-radius:var(--radius-large);
    margin:28px auto 0;
    display:block;
    max-width:820px;
}
.article-feature .card-portada{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:var(--radius-medium);
    margin-bottom:18px;
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
    .articulo-layout{ grid-template-columns:minmax(0,1fr); }
    .articulo-contenido{ grid-column:1; max-width:none; }
    .articulo-toc{
        grid-column:1; grid-row:auto;
        position:static;
        max-height:none;
        border:1px solid var(--border);
        border-radius:var(--radius-medium);
        padding:16px 20px;
        margin-bottom:8px;
    }
    .articulo-toc ul{ display:none; }
    .articulo-toc.is-abierto ul{ display:block; margin-top:12px; }
    .toc-toggle-movil{
        display:flex; width:100%; justify-content:space-between; align-items:center;
        background:none; border:none; color:var(--text); font-weight:600; cursor:pointer;
        font-size:.85rem;
    }
}

@media (max-width:640px){
    .articulo-meta{ gap:10px 16px; }
}

/* ---------- Navegación anterior/siguiente ---------- */
.articulo-prev-siguiente{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:40px 0;
}
.prev-siguiente-link{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:20px 24px;
    background:var(--surface,#fff);
    border:1px solid var(--border);
    border-radius:var(--radius-medium);
    transition:var(--transition);
}
.prev-siguiente-link:hover{ border-color:var(--primary); transform:translateY(-2px); }
.prev-siguiente-link span{ font-size:.78rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.04em; }
.prev-siguiente-link strong{ font-size:.95rem; line-height:1.4; }
.prev-siguiente-link.is-siguiente{ text-align:right; align-items:flex-end; grid-column:2; }
.prev-siguiente-link.is-anterior{ grid-column:1; }
@media (max-width:640px){
    .articulo-prev-siguiente{ grid-template-columns:1fr; }
    .prev-siguiente-link.is-siguiente{ grid-column:1; text-align:left; align-items:flex-start; }
}

/* ---------- Resultados del buscador (portada) ---------- */
.resultados-busqueda-caja{
    max-width:640px;
    margin:0 auto;
    position:relative;
    z-index:20;
}
.resultados-busqueda-caja:empty{ display:none; }
.resultados-busqueda{
    background:var(--surface,#fff);
    border:1px solid var(--border);
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-medium);
    margin-top:8px;
    overflow:hidden;
    text-align:left;
}
.resultado-busqueda-item{
    display:block;
    padding:14px 20px;
    border-bottom:1px solid var(--border);
}
.resultado-busqueda-item:last-child{ border-bottom:none; }
.resultado-busqueda-item:hover{ background:var(--background-secondary); }
.resultado-busqueda-item strong{ display:block; font-size:.95rem; margin-bottom:2px; }
.resultado-busqueda-item p{ margin:0; font-size:.82rem; color:var(--text-secondary); }
.resultados-busqueda-caja .no-results{ background:var(--surface,#fff); border:1px solid var(--border); border-radius:var(--radius-medium); margin-top:8px; padding:16px 20px; }

/* ---------- Página de resultados de búsqueda ---------- */
.buscar-hero .search-box{ margin-left:auto; margin-right:auto; }
.buscar-cabecera{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:28px;
}
.buscar-cabecera h2{ font-size:1.1rem; font-weight:600; margin:0; }
.buscar-filtros{ display:flex; gap:12px; flex-wrap:wrap; }
.buscar-filtros label{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-secondary); }
.buscar-filtros select{
    padding:8px 12px;
    border-radius:var(--radius-small);
    border:1px solid var(--border);
    background:var(--surface,#fff);
    color:var(--text);
    font-size:.85rem;
}
.badge-categoria{
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    background:rgba(0,113,227,.1);
    color:var(--primary);
}
.buscar-sin-resultados{
    text-align:center;
    padding:48px 20px;
    color:var(--text-secondary);
}
.buscar-sin-resultados p{ margin:0 0 8px; }
.buscar-sin-resultados-icono{
    width:56px; height:56px;
    margin:0 auto 20px;
    color:var(--border);
}
.buscar-sin-resultados-icono svg{ width:100%; height:100%; }

/* ---------- Skeleton loading: durante el hueco real de cálculo del
   buscador (no un retraso artificial) ---------- */
.esqueleto-tarjeta{ cursor:default; }
.esqueleto-tarjeta:hover{ transform:none; box-shadow:var(--shadow-small); }
.esqueleto-linea{
    height:14px;
    border-radius:6px;
    margin-bottom:12px;
    background:linear-gradient(90deg, var(--background-secondary) 25%, var(--border) 37%, var(--background-secondary) 63%);
    background-size:400% 100%;
    animation:esqueletoShimmer 1.4s ease infinite;
}
.esqueleto-badge{ width:90px; height:22px; border-radius:999px; }
.esqueleto-titulo{ width:85%; height:20px; margin-top:8px; }
.esqueleto-texto{ width:100%; }
@keyframes esqueletoShimmer{
    0%{ background-position:100% 50%; }
    100%{ background-position:0 50%; }
}
@media (prefers-reduced-motion: reduce){
    .esqueleto-linea{ animation:none; background:var(--background-secondary); }
}
@media (max-width:640px){
    .buscar-cabecera{ flex-direction:column; align-items:flex-start; }
}