/* Zona privada (login, cotización, cuenta) — colores oficiales (manual 2.3). */
.rh-acc{
  --red:#FE3B1F; --red-d:#DB2E13; --orange:#F18A00; --gray:#54565A;
  --ink:#3A3B3E; --body:#5F6064; --muted:#9A9A9E; --line:#ECEBE8; --soft:#F7F6F4; --paper:#fff;
  --head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font:'Roboto',-apple-system,"Segoe UI",sans-serif;
  max-width:1120px; margin:0 auto; padding:8px 0 24px; font-family:var(--font); color:var(--body);
}
.rh-acc *{box-sizing:border-box}
.rh-acc--narrow{max-width:460px}
.rh-acc__h1{font-family:var(--head); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:clamp(1.6rem,2.6vw,2.1rem); margin:0 0 22px}

/* card */
/* Bloque del equipo comercial en Mi cuenta. Se distingue del resto a propósito:
   lleva a otra herramienta (el panel de WordPress) y conviene que se note. */
.rh-acc__card--equipo{border-color:#f6b3a6; background:linear-gradient(180deg,#fff,#fff7f5)}
.rh-acc__btn--equipo{display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  background:linear-gradient(135deg,#FE3B1F,#F18A00); color:#fff; border:0; border-radius:24px;
  padding:12px 24px; font-weight:700; text-decoration:none}
.rh-acc__btn--equipo:hover{color:#fff; opacity:.92}

.rh-acc__card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:26px}
.rh-acc__card + .rh-acc__card{margin-top:20px}
.rh-acc__card h2{font-family:var(--head); font-weight:800; color:var(--ink); font-size:1.3rem; margin:0 0 12px}
.rh-acc__card h3{font-family:var(--head); font-weight:800; color:var(--ink); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px}

/* forms */
.rh-acc label{display:block; font-family:var(--head); font-weight:600; font-size:.82rem; color:var(--ink); margin-bottom:14px}
.rh-acc input, .rh-acc textarea{width:100%; margin-top:6px; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--font); font-size:.95rem; color:var(--ink); background:var(--paper)}
.rh-acc input:focus, .rh-acc textarea:focus{outline:0; border-color:var(--red); box-shadow:0 0 0 4px rgba(254,59,31,.13)}

/* tabs */
.rh-acc__tabs{display:flex; gap:8px; margin-bottom:16px}
.rh-acc__tab{flex:1; padding:11px; border:1px solid var(--line); background:var(--soft); border-radius:10px;
  font-family:var(--head); font-weight:700; font-size:.9rem; color:var(--body); cursor:pointer}
.rh-acc__tab:hover{background:var(--soft); color:var(--ink)}
.rh-acc__tab.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* botones/links */
.rh-acc__btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px;
  border-radius:10px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
  font-family:var(--head); font-weight:700; font-size:.92rem; cursor:pointer; text-decoration:none; transition:.18s}
.rh-acc__btn:hover{background:var(--paper); border-color:var(--ink)}
.rh-acc__btn--solid{background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 10px 22px -10px var(--red); width:100%; margin-top:4px}
.rh-acc__btn--solid:hover{background:var(--red-d); border-color:var(--red-d)}
.rh-acc__btn--pdf{width:100%; margin-top:10px; background:var(--soft); color:var(--ink); border-color:var(--line)}
.rh-acc__btn--pdf:hover{border-color:var(--gray); background:var(--paper)}
.rh-acc__btn--pdf svg{flex:0 0 auto; color:var(--red)}
.rh-acc__btn--mini{width:auto; height:38px; padding:0 15px; margin-top:0; font-size:.82rem}
.rh-acc__cardhead{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.rh-acc__cardhead h3{margin:0}
.rh-acc__link{display:inline-block; margin-top:12px; color:var(--body); font-size:.85rem; text-decoration:underline}
.rh-acc__link:hover{color:var(--red)}
.rh-acc__hint{font-size:.85rem; color:var(--muted); line-height:1.5; margin:8px 0 0}
.rh-acc__err{margin:10px 0 0; color:var(--red-d); font-size:.85rem}

/* grid genérico (cuenta / cotización) */
.rh-acc__grid{display:grid; grid-template-columns:260px 1fr; gap:26px; align-items:start}
.rh-acc--cot .rh-acc__grid{grid-template-columns:1fr 320px}

/* nav de cuenta */
.rh-acc__nav{display:flex; flex-direction:column; gap:4px; border:1px solid var(--line); border-radius:14px; padding:10px; background:var(--paper)}
.rh-acc__nav a{padding:11px 14px; border-radius:9px; color:var(--body); font-family:var(--head); font-weight:600; font-size:.9rem; text-decoration:none}
.rh-acc__nav a:hover{background:var(--soft); color:var(--ink)}
.rh-acc__nav a.is-on{background:var(--soft); color:var(--red)}

/* perfil */
.rh-acc__field{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.92rem}
.rh-acc__field span{color:var(--muted)}
.rh-acc__field strong{color:var(--ink); font-weight:600}
.rh-acc__count{display:inline-block; margin-left:6px; font-family:var(--font); font-weight:400; color:var(--muted); font-size:.8rem}

/* favoritos */
.rh-acc__favs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rh-acc__fav{border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:.2s}
.rh-acc__fav:hover{transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(43,43,46,.24); border-color:#f6b3a6}
.rh-acc__favimg{position:relative; aspect-ratio:4/3; background:var(--paper); display:grid; place-items:center; overflow:hidden}
/* Absoluta: con la imagen en el flujo, el `height:100%` no resuelve contra el alto
   que da `aspect-ratio` y la foto salía recortada (efecto "zoom"). */
.rh-acc .rh-acc__favimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px}
.rh-acc__favname{font-family:var(--head); font-weight:700; font-size:.86rem; color:var(--ink); padding:10px 12px 2px; line-height:1.25}
.rh-acc__favsku{font-family:ui-monospace,Menlo,monospace; font-size:.66rem; color:var(--muted); padding:0 12px 12px}

/* cotización */
.rh-cot__items{display:flex; flex-direction:column; gap:12px}
.rh-cot__item{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--paper)}
/* La miniatura es un ENLACE al producto (volver a verlo desde la lista). */
/* 88px y no 74: ahora la miniatura muestra el mockup con el logo del cliente y
   con menos no se distinguía. */
.rh-cot__img{position:relative; width:88px; height:88px; flex:0 0 auto; border-radius:10px; background:var(--paper);
  border:1px solid var(--line); overflow:hidden; display:grid; place-items:center; transition:border-color .15s;
  color:var(--body)} /* si la foto no carga, el texto alternativo no debe salir fucsia (tema) */
.rh-cot__img:hover{border-color:var(--red); color:var(--red)}
.rh-acc .rh-cot__img img{width:100%; height:100%; object-fit:contain; padding:4px}
/* El logo del cliente encima de la foto: lo ubica account.js (medidas en px),
   por eso pisa el 100%×100% de la regla de arriba. */
.rh-acc .rh-cot__img .rh-cot__logo{position:absolute; left:50%; top:50%; width:28%; height:auto; padding:0;
  object-fit:contain; transform:translate(-50%,-50%); pointer-events:none}
.rh-acc .rh-cot__img .rh-cot__logo[hidden]{display:none}
.rh-cot__b{flex:1; min-width:0}
.rh-cot__name{font-family:var(--head); font-weight:700; color:var(--ink); font-size:.95rem; margin:0}
.rh-cot__name a{color:inherit; text-decoration:none}
.rh-cot__name a:hover{color:var(--red)}
/* Ir a la ficha a poner o corregir el logo de ESE producto. */
.rh-cot__logobtn{display:inline-flex; align-items:center; gap:6px; margin-top:7px; padding:4px 10px;
  border:1px solid var(--line); border-radius:8px; background:var(--paper);
  font-size:.75rem; color:var(--body); text-decoration:none; transition:.15s}
.rh-cot__logobtn:hover{background:rgba(254,59,31,.06); border-color:var(--red); color:var(--red)}
.rh-cot__logobtn svg{flex:0 0 auto; color:var(--red)}
.rh-cot__sku{font-family:ui-monospace,Menlo,monospace; font-size:.68rem; color:var(--muted); margin:3px 0 0}
.rh-cot__nota{font-size:.8rem; color:var(--body); margin:4px 0 0}
/* Cantidad editable (− nº +). El input necesita ancho para 4 cifras. */
.rh-cot__qty{display:flex; align-items:center; flex:0 0 auto; border:1.5px solid var(--line); border-radius:10px; overflow:hidden}
.rh-cot__step{width:34px; height:40px; padding:0; border:0; background:var(--paper); color:var(--ink);
  font-family:var(--head); font-size:1.05rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.rh-cot__step:hover{background:var(--soft); color:var(--red)}
.rh-acc .rh-cot__qtyin{width:66px; height:40px; margin:0; padding:0 4px; border:0; border-left:1px solid var(--line);
  border-right:1px solid var(--line); border-radius:0; text-align:center; font-family:var(--head); font-weight:700;
  font-size:.92rem; color:var(--ink); background:var(--paper); -moz-appearance:textfield}
.rh-acc .rh-cot__qtyin::-webkit-outer-spin-button,.rh-acc .rh-cot__qtyin::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.rh-acc .rh-cot__qtyin:focus{outline:0; box-shadow:inset 0 0 0 2px rgba(254,59,31,.25)}
.rh-cot__item.is-busy{opacity:.55}
/* ✕ en SVG y centrado con flex: el carácter × quedaba corrido (y el reset del
   tema le mete relleno a todo botón). */
.rh-cot__del{width:36px; height:36px; padding:0; flex:0 0 auto; border-radius:9px; border:1px solid var(--line);
  background:var(--paper); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center}
.rh-cot__del:hover{background:var(--paper); border-color:var(--red); color:var(--red)}
.rh-cot__summary{border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--paper); position:sticky; top:20px}
.rh-cot__summary h3{font-family:var(--head); font-weight:800; color:var(--ink); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px}
.rh-cot__row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); margin-bottom:14px; color:var(--body)}
.rh-cot__row strong{color:var(--ink)}

/* estados */
.rh-acc__empty{text-align:center; padding:60px 20px; border:1px dashed var(--line); border-radius:16px; color:var(--muted)}
.rh-acc__empty .rh-acc__btn{width:auto; display:inline-flex; margin-top:14px}

/* ---- Cotizaciones anteriores (historial) ---- */
.rh-hist{margin-top:44px; padding-top:32px; border-top:1px solid var(--line)}
.rh-hist__h2{font-family:var(--head); font-weight:800; letter-spacing:-.01em; color:var(--ink); font-size:1.25rem; margin:0 0 4px}
.rh-hist__c{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-top:16px}
.rh-hist__head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
.rh-hist__folio{font-family:var(--head); font-weight:800; color:var(--ink); font-size:.95rem; margin:0}
.rh-hist__fecha{margin:2px 0 0; font-size:.82rem; color:var(--muted)}
.rh-hist__meta{display:flex; align-items:baseline; gap:14px; font-size:.85rem; color:var(--body)}
.rh-hist__meta strong{font-family:var(--head); color:var(--ink); font-size:.98rem}

/* Tira de miniaturas: reconocer la cotización sin abrir el detalle. */
.rh-hist__tira{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 4px}
.rh-hist__mini{width:52px; height:52px; border:1px solid var(--line); border-radius:9px; background:var(--soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family:var(--head); font-weight:800; color:var(--muted)}
.rh-hist__mini img{width:100%; height:100%; object-fit:contain; padding:4px}
.rh-hist__mas{align-self:center; font-size:.82rem; color:var(--muted)}

.rh-hist__det{margin-top:10px}
.rh-hist__det summary{cursor:pointer; font-family:var(--head); font-weight:700; font-size:.84rem; color:var(--body)}
.rh-hist__det summary:hover{color:var(--ink)}
.rh-hist__list{list-style:none; margin:12px 0 0; padding:0; border-top:1px solid var(--line)}
.rh-hist__list li{display:grid; grid-template-columns:1fr auto 46px 96px; gap:12px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:.86rem}
.rh-hist__n a{color:var(--ink); font-weight:600; text-decoration:none}
.rh-hist__n a:hover{color:var(--red)}
.rh-hist__tag{display:inline-block; margin-left:8px; font-style:normal; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--orange); border:1px solid currentColor; border-radius:20px; padding:1px 7px}
.rh-hist__nota{display:block; color:var(--muted); font-size:.8rem; margin-top:2px}
.rh-hist__sku{color:var(--muted); font-size:.8rem}
.rh-hist__q{text-align:center; color:var(--body)}
.rh-hist__p{text-align:right; font-family:var(--head); font-weight:700; color:var(--ink)}
.rh-hist__f{margin-top:14px}

@media (max-width:640px){
  /* Cuatro columnas no entran en un teléfono: nombre arriba, el resto debajo. */
  .rh-hist__list li{grid-template-columns:1fr auto; row-gap:2px}
  .rh-hist__n{grid-column:1 / -1}
  .rh-hist__q{text-align:left}
}

.rh-acc__toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--ink); color:#fff; font-size:.9rem; padding:12px 20px; border-radius:10px; pointer-events:none; transition:.25s; z-index:9999}
.rh-acc__toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

@media (max-width:800px){
  .rh-acc__grid, .rh-acc--cot .rh-acc__grid{grid-template-columns:1fr}
  .rh-acc__favs{grid-template-columns:repeat(2,1fr)}
  .rh-cot__summary{position:static}
}

/* Color del renglón: cada color de un mismo producto es su propia línea. */
.rh-cot__color{display:flex; align-items:center; gap:6px; margin:3px 0 0; font-size:.82rem; color:var(--body)}
.rh-cot__sw{width:12px; height:12px; border-radius:50%; border:1px solid var(--line); flex:none}
.rh-hist__col{display:inline-block; margin-left:8px; font-style:normal; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gray); border:1px solid var(--line); border-radius:20px; padding:1px 8px}

/* Aviso de vuelta desde un enlace del correo (confirmado / enlace vencido). */
.rh-acc__aviso{margin:0 0 20px; padding:14px 18px; border-radius:12px; font-size:.92rem; line-height:1.5}
.rh-acc__aviso--ok{background:#EAF6EF; color:#1F7A46; border:1px solid #C9E7D5}
.rh-acc__aviso--bad{background:#FDE9E5; color:#C0392B; border:1px solid #F5CFC7}