/* ============================================================================
   RODANDO VAN — DESIGN SYSTEM v1 (capa final)
   Documento: design_system/DESIGN_SYSTEM.md. Se aplica por tandas.
   Solo actúa con <html class="rv-ds"> (modo vista previa: ?rvds=1 lo activa en tu
   navegador, ?rvds=0 lo apaga; RV_DS_ON=true en inc/enqueue.php lo activa para todos).
   ========================================================================== */

/* ---------- Tanda 1 · Tokens ---------- */
html.rv-ds{
  --ds-ink:#1A2B3C;--ds-ink-hover:#111D2B;
  --ds-green:#68795A;--ds-green-hover:#55654A;--ds-green-soft:#EEF2E8;
  --ds-line-strong:#CBD2D9;--ds-pill:999px;--ds-h:48px;
  /* Se oscurecen los fondos que llevan texto blanco (2,7:1 → 4,7:1) y el gris secundario (4,4 → 5,6:1). */
  --rv-primary:#68795A;
  --rv-accent:#B5764C;--rv-accent-dark:#9A6340;
  --rv-muted:#5C6877;
}

/* ---------- Tanda 1 · Botones ---------- */
/* Contorno (.rv-btn, .rv-btn-outline): secundario, antes verde claro con letra de peso 300. */
html.rv-ds .rv-btn,html.rv-ds a.rv-btn,html.rv-ds .rv-btn-outline{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:0;border-radius:var(--ds-pill);
  background:transparent;color:var(--ds-ink);box-shadow:inset 0 0 0 1.5px var(--ds-ink);font:600 15px/1 var(--rv-font-sans);transform:none;text-decoration:none}
html.rv-ds .rv-btn:hover,html.rv-ds a.rv-btn:hover,html.rv-ds .rv-btn-outline:hover{background:var(--ds-ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ds-ink);transform:none}
html.rv-ds .rv-btn:focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px;box-shadow:inset 0 0 0 1.5px var(--ds-ink);border-radius:var(--ds-pill)}
/* En el pie (fondo oscuro) el contorno es blanco */
html.rv-ds .rv-site-footer .rv-btn,html.rv-ds .rv-site-footer a.rv-btn{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
html.rv-ds .rv-site-footer .rv-footer-favorito a.rv-btn:hover{background:#fff;color:var(--ds-ink)!important;box-shadow:inset 0 0 0 1.5px #fff}

/* Enviar comentarios → principal (tinta) */
html.rv-ds form.comment-form input#submit,
html.rv-ds .rv-comments form#commentform input[type="submit"],
html.rv-ds .rv-comments form#commentform input#submit{
  min-height:var(--ds-h);padding:0 26px;border:0!important;border-radius:var(--ds-pill)!important;background:var(--ds-ink)!important;color:#fff!important;
  box-shadow:none!important;font:600 15px/1 var(--rv-font-sans)!important;transform:none!important}
html.rv-ds form.comment-form input#submit:hover,
html.rv-ds .rv-comments form#commentform input[type="submit"]:hover,
html.rv-ds .rv-comments form#commentform input#submit:hover{background:var(--ds-ink-hover)!important;transform:translateY(-1px)!important}

/* [boton] → principal (tinta) */
html.rv-ds .btn-custom{display:inline-flex!important;align-items:center;justify-content:center;min-height:var(--ds-h);padding:0 26px!important;border:0!important;border-radius:var(--ds-pill)!important;
  background:var(--ds-ink)!important;color:#fff!important;font:600 15px/1 var(--rv-font-sans)!important;box-shadow:none!important}
html.rv-ds .btn-custom:hover{background:var(--ds-ink-hover)!important;transform:translateY(-1px)!important}

/* [afiliado] y botón de la tarjeta de afiliado → explorar (verde) */
html.rv-ds .affiliate-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:var(--ds-pill);background:var(--ds-green);color:#fff;font:600 15px/1 var(--rv-font-sans)}
html.rv-ds .affiliate-cta:hover{background:var(--ds-green-hover);color:#fff}

/* Botón de las tarjetas de la barra lateral (antes terracota con blanco, 2,5:1) → principal (tinta) */
html.rv-ds .rv-card--hero .rv-card__cta,html.rv-ds .rv-card__cta--button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ds-h);padding:0 22px;border:0;border-radius:var(--ds-pill);
  background:var(--ds-ink);color:#fff;font:600 15px/1.2 var(--rv-font-sans)}
html.rv-ds .rv-card--hero .rv-card__cta:hover,html.rv-ds .rv-card__cta--button:hover{background:var(--ds-ink-hover);color:#fff}

/* Botón del aviso de campaña → principal (tinta), píldora */
html.rv-ds .rv-campana__cta{min-height:var(--ds-h);border-radius:var(--ds-pill);background:var(--ds-ink);color:#fff!important;font-weight:600}
html.rv-ds .rv-campana__cta:hover{background:var(--ds-ink-hover)}

/* Descuentos: «Ir a la tienda» y similares pasan de 12 px a píldora */
html.rv-ds .ds .ds-ir,html.rv-ds .ds .ds-tienda-acc{border-radius:var(--ds-pill)}

/* ---------- Tanda 2 · Campos, buscadores y foco ---------- */
html.rv-ds{--rv-ring:0 0 0 4px rgba(104,121,90,.28);--ds-halo:0 0 0 4px rgba(104,121,90,.28)}
/* Foco de teclado en enlaces y botones: contorno tinta (sustituye al anillo con radio de 8 px forzado) */
html.rv-ds :focus-visible{outline:2px solid var(--ds-ink);outline-offset:3px;box-shadow:none;border-radius:6px}
html.rv-ds :is(button,.rv-btn,.wp-element-button,input[type="submit"],.btn-custom,.affiliate-cta):focus-visible{border-radius:var(--ds-pill)}

/* Campos de una línea: píldora de 48 px. Se limita al contenido, la barra lateral, los comentarios y el pie
   (el buscador a pantalla completa del menú tiene su propio diseño). */
html.rv-ds :is(.rv-site-main,.rv-sidebar,.rv-site-footer,.rv-comments) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not(.mailpoet_submit),
html.rv-ds :is(.rv-site-main,.rv-sidebar,.rv-site-footer,.rv-comments) select{
  height:var(--ds-h);border:1px solid var(--ds-line-strong);border-radius:var(--ds-pill);background-color:#fff;color:var(--ds-ink);font-size:16.5px}
/* Varias líneas: 24 px y 84 px de alto mínimo */
html.rv-ds :is(.rv-site-main,.rv-sidebar,.rv-site-footer,.rv-comments) textarea{
  min-height:84px;padding:14px 20px;border:1px solid var(--ds-line-strong);border-radius:24px;background-color:#fff;color:var(--ds-ink);font-size:16.5px}
/* Foco único: borde tinta + halo verde */
html.rv-ds :is(.rv-site-main,.rv-sidebar,.rv-site-footer,.rv-comments) :is(input,textarea,select):focus,
html.rv-ds :is(.rv-site-main,.rv-sidebar,.rv-site-footer,.rv-comments) :is(input,textarea,select):focus-visible{
  outline:none;border-color:var(--ds-ink)!important;box-shadow:var(--ds-halo)}

/* Newsletter (MailPoet): 48 px, mismo borde y foco */
html.rv-ds .mailpoet_form input.mailpoet_text,html.rv-ds #mailpoet_form_1 input.mailpoet_text{
  height:var(--ds-h)!important;min-height:var(--ds-h)!important;padding:0 22px!important;font-family:inherit!important;border:1px solid var(--ds-line-strong)!important;border-radius:var(--ds-pill)!important;box-shadow:none!important;background:#fff!important}
html.rv-ds .mailpoet_form input.mailpoet_text:focus,html.rv-ds #mailpoet_form_1 input.mailpoet_text:focus{
  border-color:var(--ds-ink)!important;box-shadow:var(--ds-halo)!important;outline:none}
html.rv-ds .rv-site-main .mailpoet_form input.mailpoet_submit,html.rv-ds #mailpoet_form_1 input.mailpoet_submit{height:var(--ds-h)!important;min-height:var(--ds-h)!important;font-family:inherit!important}

/* Buscadores del blog, la tienda y los hubs: mismo foco */
html.rv-ds .rv-site-main .bl-buscar input,html.rv-ds .tn .tn-buscar input,html.rv-ds .rvp-buscar input{
  height:var(--ds-h);border-radius:var(--ds-pill);box-shadow:0 0 0 1px var(--ds-line-strong),0 4px 14px rgba(23,36,48,.06)!important;border:0}
html.rv-ds .rv-site-main .bl-buscar input:focus,html.rv-ds .tn .tn-buscar input:focus,html.rv-ds .rvp-buscar input:focus{
  outline:none!important;box-shadow:0 0 0 1px var(--ds-ink),0 0 0 5px rgba(104,121,90,.28)!important}
html.rv-ds .rvp-buscar input{padding-left:2.9rem}

/* ---------- Tanda 3 · Enlaces, «Ver en Amazon», chips, banderas y pestañas ---------- */
/* Enlaces dentro del texto: el hover oscurece y subraya más (antes aclaraba) */
html.rv-ds :is(.rv-post-content,.rv-page-content,.rv-archive-desc) a:not(.rv-btn):not(.wp-element-button):not(.btn-custom):not(.affiliate-cta):not(.rvaff-btn):hover{
  color:var(--ds-green-hover);text-decoration-thickness:2px}

/* Enlace con flecha: un solo estilo (verde, 600, hover más oscuro) */
html.rv-ds :is(.rv-paises-explore,.rv-app-card__cta,.card-pais-footer,.rv-home-section-link,.section-header .ver-todos,.rv-404-link,body.home .rv-grid-footer .rv-chip){
  color:var(--ds-green)!important;font-family:var(--rv-font-sans)!important;font-weight:600!important;font-size:15.5px!important;text-decoration:none!important;background:transparent!important;border:0!important;box-shadow:none!important}
html.rv-ds :is(.rv-paises-explore,.rv-app-card__cta,.card-pais-footer,.rv-home-section-link,.section-header .ver-todos,.rv-404-link,body.home .rv-grid-footer .rv-chip):hover{
  color:var(--ds-green-hover)!important;background:transparent!important;transform:none}

/* «Ver en Amazon»: texto con flecha, en verde y a la derecha (antes botón terracota que robaba protagonismo al producto) */
html.rv-ds .rvaff-btn{display:inline-flex;justify-content:flex-end;align-self:flex-end;margin-left:auto;min-height:44px;padding:0 2px;border:0;border-radius:0;
  background:transparent!important;color:var(--ds-green)!important;box-shadow:none!important;font:600 14.5px/1 var(--rv-font-sans);transform:none}
html.rv-ds .rvaff-btn:hover{background:transparent!important;color:var(--ds-green-hover)!important;text-decoration:underline;transform:none;box-shadow:none!important}
html.rv-ds .tn-prod-cta,html.rv-ds .ds-prod-cta{justify-content:flex-end;color:var(--ds-green)}
html.rv-ds .tn-prod:hover .tn-prod-cta,html.rv-ds .ds-prod:hover .ds-prod-cta{color:var(--ds-green-hover)}

/* «Ver más artículos» del blog: enlace con flecha */
html.rv-ds .rv-site-main .bl-mas{min-height:44px;padding:0 6px;background:transparent!important;color:var(--ds-green)!important;box-shadow:none;border-radius:0;font:600 15.5px/1 var(--rv-font-sans)}
html.rv-ds .rv-site-main .bl-mas::after{content:"→";margin-left:8px;display:inline-block;transition:transform .2s}
html.rv-ds .rv-site-main .bl-mas:hover{background:transparent!important;color:var(--ds-green-hover)!important}
html.rv-ds .rv-site-main .bl-mas:hover::after{transform:translateX(4px)}

/* Etiqueta de categoría de las tarjetas: 12 px, bandera rectangular alineada con el texto */
html.rv-ds .post-card-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1;padding:.42em .85em;color:var(--ds-green)}
html.rv-ds .post-card-chip.rv-pais::before{width:17px;height:12px;border-radius:2px}
/* Filtros del blog: bandera rectangular (antes círculo), 44 px de alto */
html.rv-ds .bl-flag{width:18px;height:13px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
html.rv-ds .rv-site-main .bl-chip{min-height:44px}
html.rv-ds .rvp-chip{min-height:40px;display:inline-flex;align-items:center}

/* Pestañas: pista gris en píldora con indicador blanco */
html.rv-ds .tn-tabs,html.rv-ds .bl-seg{background:#F1F3F5;border-radius:var(--ds-pill)}
html.rv-ds .tn .tn-tabs .tn-tab{border-radius:var(--ds-pill);min-height:44px}
html.rv-ds .tn-ind,html.rv-ds .bl-seg-ind{border-radius:var(--ds-pill)}

/* ---------- Tanda 4 · Tarjetas (20 px en todas) y lectura (18 px) ---------- */
html.rv-ds :is(.post-card-final,.tn-prod,.ds-prod,.ds-tienda,.ds-cupon,.rv-tarjeta-recurso,.rvp-card,.rvp-dest,.rvp-sistema,.rvp-cifra,.rvp-ficha,.card-pais,.rv-card,.rv-app-card,.rvx-app,.rvx-vt,.rv-author-box,.toc-box,.callout-box,.rvaff,.rv-related-card,.rv-feature,.rv-stat){
  border-radius:var(--rv-radius-card,20px)}
/* Las que llevan foto o cabecera recortan las esquinas */
html.rv-ds :is(.post-card-final,.tn-prod,.ds-prod,.rvp-card,.rvp-dest,.card-pais,.rv-app-card){overflow:hidden}
/* Texto del artículo: 18 px / 1,7 (17 px en móvil, como ya estaba) */
html.rv-ds .rv-post-content{font-size:18px;line-height:1.7}
@media (max-width:768px){html.rv-ds .rv-post-content{font-size:17px}}

/* ---------- Ajustes tras la auditoría del 13-oct ---------- */
/* Tarjetas que seguían fuera de los 20 px: guía de Chile (formatos, encaja/no encaja, dolores) y recursos */
html.rv-ds :is(.rv-format-card,.rv-fit-card,.rv-pain-card){border-radius:var(--rv-radius-card,20px)}
html.rv-ds .rv-tarjeta-recurso{border-radius:var(--rv-radius-card,20px)!important}
/* Paginación (píldora) y botones de la serie de artículos */
html.rv-ds .rv-pagination .page-numbers{border-radius:var(--ds-pill);min-width:44px;min-height:44px}
html.rv-ds .rv-serie-nav__btn{border-radius:var(--rv-radius-card,20px)}