/* Paleta y tipografia de la maqueta, limitadas a los componentes del plugin. */
.ob-pass,.ob-tallas,.ob-tallas__cab,.ob-modal{
	--tinta:#1c1a17; --crema:#f7f1e8; --papel:#ffffff; --cuero:#b0713a; --cuero-osc:#8a5a34;
	--gris:#8a8378; --linea:#eadfce; --texto:#4b463f;
	box-sizing:border-box;
}
.ob-tallas,.ob-tallas__cab,.ob-modal{font:16px/1.6 Arial,Helvetica,sans-serif;color:var(--tinta)}
.ob-modal *,.ob-tallas *,.ob-pass *{box-sizing:border-box}
  .ob-tallas{margin:4px 0 0}
  .ob-tallas__cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .ob-tallas__eti{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
  .ob-guia-abrir{background:none;border:0;padding:0;color:var(--cuero-osc);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .ob-guia-abrir:hover{color:var(--tinta)}
  .ob-tallas__lista{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
  .ob-talla{min-width:62px;padding:11px 10px;border:1px solid var(--tinta);background:var(--papel);color:var(--tinta);
            font:600 15px/1 Arial,Helvetica,sans-serif;border-radius:6px;cursor:pointer;text-align:center}
  .ob-talla:hover{background:var(--tinta);color:var(--papel)}
  .ob-talla[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
  .ob-talla[disabled]{cursor:not-allowed;border-color:var(--linea);color:var(--gris);background:#faf7f2;
            text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--cuero)}
  .ob-talla[disabled]:hover{background:#faf7f2;color:var(--gris)}
  .ob-tallas__pie{margin:10px 0 0;font-size:13px;color:var(--gris)}

  /* ===== Modal guia ===== */
  .ob-modal{position:fixed;inset:0;background:rgba(28,26,23,.62);display:flex;align-items:center;justify-content:center;padding:16px;z-index:9999}
  .ob-modal[hidden]{display:none}
  .ob-modal__caja{background:var(--papel);max-width:760px;width:100%;max-height:90vh;overflow:auto;border-radius:12px;padding:26px}
  .ob-modal__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .ob-modal__cerrar{background:none;border:0;font-size:26px;line-height:1;color:var(--gris);cursor:pointer;padding:0 4px}
  .ob-dibujo{width:100%;height:auto;margin:14px 0 6px}
  .ob-pasos{margin:0 0 4px;padding-left:20px;color:var(--texto)}
  .ob-pasos li{margin-bottom:6px}
  .ob-modal table{border-collapse:collapse;width:100%;margin-top:14px;font-size:15px}
  .ob-modal th,.ob-modal td{border:1px solid var(--linea);padding:9px 10px;text-align:center}
  .ob-modal th{background:var(--crema);font-weight:700}
  .ob-modal td.pend{color:var(--gris);font-style:italic}

  .ob-pass{position:relative;display:block}
  .ob-pass input{width:100%;padding:11px 44px 11px 12px;border:1px solid #c9c2b6;border-radius:6px;font-size:15px}
  .ob-pass__ojo{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:36px;height:36px;display:flex;
      align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--gris);border-radius:6px}
  .ob-pass__ojo:hover{color:var(--tinta)}
  .ob-pass__ojo:focus-visible{outline:2px solid var(--cuero);outline-offset:1px}
  .ob-pass__ojo svg{width:21px;height:21px;display:block}

.ob-modal__cab h2{font-family:Georgia,'Times New Roman',serif;font-size:21px;margin:0;line-height:1.2;color:var(--tinta)}
.ob-modal__intro{margin:8px 0 0;color:var(--texto)}
.ob-dibujo svg{display:block;width:100%;height:auto}
.ob-pass .ob-pass__ojo{padding:0}
.ob-pass .ob-pass__ojo:hover,.ob-pass .ob-pass__ojo:focus,
.ob-tallas__cab .ob-guia-abrir:hover,.ob-tallas__cab .ob-guia-abrir:focus,
.ob-modal .ob-modal__cerrar:hover,.ob-modal .ob-modal__cerrar:focus{background:none}
.ob-tallas .ob-talla:focus-visible,.ob-tallas__cab .ob-guia-abrir:focus-visible,
.ob-modal .ob-modal__cerrar:focus-visible{outline:2px solid var(--cuero);outline-offset:3px}
/* Se aplica desde JS despues de construir la escalera; el select conserva semantica y foco. */
select.ob-select-oculto{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
select.ob-select-oculto:focus{position:static;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal}
@media(max-width:480px){
	.ob-modal__caja{padding:18px;max-height:calc(100dvh - 32px)}
	.ob-modal table{font-size:13px}
	.ob-modal th,.ob-modal td{padding:7px 5px;overflow-wrap:anywhere}
}

/* El kit de Elementor pinta TODO <button> con fondo marron rgb(148,83,9) y texto rosa
   rgb(204,51,102), medido en /producto/modelo-4011/ el 16-10: gana a las reglas de arriba por
   especificidad. Estos bloques reponen el aspecto aprobado; el !important es la unica forma sin
   tocar el kit del tema, que es de Sergio. */
.ob-tallas .ob-tallas__lista .ob-talla{
	background:var(--papel)!important;color:var(--tinta)!important;border:1px solid var(--tinta)!important;
	border-radius:6px!important;padding:11px 10px!important;min-width:62px;
	font:600 15px/1 Arial,Helvetica,sans-serif!important;text-transform:none!important;letter-spacing:0!important;
	box-shadow:none!important;text-decoration:none!important;
}
.ob-tallas .ob-tallas__lista .ob-talla:hover,
.ob-tallas .ob-tallas__lista .ob-talla[aria-pressed="true"]{
	background:var(--tinta)!important;color:var(--papel)!important;
}
.ob-tallas .ob-tallas__lista .ob-talla[disabled]{
	background:#faf7f2!important;color:var(--gris)!important;border-color:var(--linea)!important;
	text-decoration:line-through!important;text-decoration-thickness:2px;text-decoration-color:var(--cuero);
	cursor:not-allowed;
}
.ob-tallas .ob-tallas__cab .ob-guia-abrir,
.ob-modal .ob-modal__cerrar{
	background:none!important;border:0!important;box-shadow:none!important;padding:0!important;
	border-radius:0!important;text-transform:none!important;
}
.ob-tallas .ob-tallas__cab .ob-guia-abrir{color:var(--cuero-osc)!important;font:400 14px/1.4 Arial,Helvetica,sans-serif!important;text-decoration:underline!important;text-underline-offset:3px}
.ob-tallas .ob-tallas__cab .ob-guia-abrir:hover{color:var(--tinta)!important}
.ob-modal .ob-modal__cerrar{color:var(--gris)!important;font-size:26px!important;line-height:1!important}
/* La fila de la tabla de variaciones deja una banda gris (td.value, 60 px) cuando la escalera ya
   esta montada: se oculta entera, pero accesible, para que el <select> siga existiendo. */
table.variations.ob-variaciones-oculta{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}

/* El ojo es un <button> y tambien se lo come el kit del tema (borde y texto rosa). */
.ob-pass .ob-pass__ojo{
	background:none!important;border:0!important;box-shadow:none!important;border-radius:6px!important;
	padding:0!important;color:var(--gris)!important;min-width:0!important;
}
.ob-pass .ob-pass__ojo:hover{background:none!important;color:var(--tinta)!important}

/* En movil el dibujo baja a ~340 px de ancho y sus rotulos se vuelven ilegibles: se agrandan en
   unidades del viewBox, y el de la izquierda se ancla al principio para que no se salga. */
@media(max-width:600px){
	.ob-dibujo .ob-svg-titulo{font-size:46px;transform:translateY(-18px)}
	.ob-dibujo .ob-svg-pie{font-size:40px}
	.ob-dibujo .ob-svg-pie--izq{text-anchor:start}
}