/* ============================================================
   COTIZADOR v7 — SILLAS DE RUEDAS PARA PERROS
   Sistema de tallas | Poppins | Pantalla completa
   ============================================================ */

/* ── ANTI-TACHADO GLOBAL ── */
.cot-wrap *, .cot-wrap *::before, .cot-wrap *::after {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}
.cot-restart { text-decoration: none !important; }
.cot-wa-btn  { text-decoration: none !important; }

:root {
  --cot-green-dark:  #034d6d;
  --cot-green:       #0a6d96;
  --cot-green-mid:   #4da8cc;
  --cot-green-light: #a8d8ec;
  --cot-green-pale:  #e0f2fa;
  --cot-green-deep:  #022f44;
  --cot-wa:          #25D366;
  --cot-amber-bg:    #FAEEDA;
  --cot-amber-bdr:   #FAC775;
  --cot-amber-txt:   #633806;
  --cot-amber-dark:  #854F0B;
  --cot-bg:          #FFFFFF;
  --cot-bg2:         #F7F7F4;
  --cot-border:      #E5E5DF;
  --cot-border2:     #D0D0C8;
  --cot-text:        #1A1A18;
  --cot-text2:       #6B7280;
  --cot-radius:      12px;
  --cot-radius-sm:   8px;
  --cot-font:        'Poppins', sans-serif;
  --cot-sidebar-w:   340px;
}

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.cot-wrap, .cot-wrap * { font-family:var(--cot-font); }

/* ── CONTENEDOR ── */
.cot-wrap { width:100%;max-width:100%;margin:0;color:var(--cot-text);background:var(--cot-bg);box-shadow:0 4px 28px rgba(0,0,0,.09);font-size:15px; }
.entry-content .cot-wrap,
.page-content .cot-wrap,
.wp-block-group .cot-wrap { margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%); }

/* ── HEADER ── */
.cot-header { background:var(--cot-green-dark);padding:20px 36px; }
.cot-header-inner { display:flex;align-items:center;gap:14px;max-width:1400px;margin:0 auto; }
.cot-header-icon  { font-size:28px;color:var(--cot-green-light);flex-shrink:0; }
.cot-header-title { color:#fff;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2; }
.cot-header-sub   { color:var(--cot-green-light);font-size:13px;font-weight:400;margin-top:3px; }

/* ── NAV ── */
.cot-nav { display:flex;background:var(--cot-green-deep); }
.cot-nav-item {
  flex:1;padding:14px 6px;text-align:center;
  font-size:13px;font-weight:500;color:var(--cot-green-mid);cursor:default;white-space:nowrap;
}
.cot-nav-item.cot-nav-act  { color:#fff;border-bottom:3px solid var(--cot-wa);font-weight:700; }
.cot-nav-item.cot-nav-done { color:var(--cot-green-light);font-weight:600; }
.cot-nav-num {
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;
  font-size:10px;margin-right:6px;flex-shrink:0;
}
.cot-nav-item.cot-nav-done .cot-nav-num { background:var(--cot-green);border-color:var(--cot-green);color:#fff; }

/* ── BODY ── */
.cot-body { display:flex;min-height:500px;max-width:1400px;margin:0 auto; }
/* Sidebar resumen a la DERECHA — formulario primero */

/* ── SIDEBAR ── */
.cot-left {
  width:var(--cot-sidebar-w);min-width:var(--cot-sidebar-w);
  background:var(--cot-bg2);border-left:1px solid var(--cot-border);
  padding:20px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;
  order:2;
}
.cot-chair-box {
  width:300px;height:300px;border-radius:var(--cot-radius);
  background:var(--cot-bg);border:1px solid var(--cot-border);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.cot-svg { width:284px;height:284px; }
.cot-chair-label { font-size:14px;font-weight:700;color:var(--cot-text);text-align:center;min-height:20px;width:100%; }

.cot-price-box { background:var(--cot-green-dark);border-radius:var(--cot-radius-sm);padding:14px 16px;width:100%;text-align:center; }
.cot-price-label { font-size:10px;color:var(--cot-green-light);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:3px; }
.cot-price-total { font-size:26px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em;word-break:break-word; }
.cot-price-base  { font-size:11px;color:var(--cot-green-mid);margin-top:4px;min-height:14px;line-height:1.4; }

.cot-summary { width:100%;background:var(--cot-bg);border:1px solid var(--cot-border);border-radius:var(--cot-radius-sm);padding:10px 13px; }
.cot-sum-row { display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;border-bottom:1px solid var(--cot-border); }
.cot-sum-row:last-child { border-bottom:none; }
.cot-sum-row span:first-child { color:var(--cot-text2); }
.cot-sum-row span:last-child  { color:var(--cot-text);font-weight:600;text-align:right; }
.cot-sum-total span:first-child { color:var(--cot-text);font-weight:700;font-size:13px; }
.cot-sum-total span:last-child  { color:var(--cot-green-dark);font-size:14px;font-weight:700; }

/* ── PANEL DERECHO ── */
.cot-right { flex:1;padding:32px 40px;order:1; }
.cot-step { display:none; }
.cot-step.cot-step-act { display:block; }
.cot-step-title { font-size:22px;font-weight:700;color:var(--cot-text);margin:0 0 6px;letter-spacing:-.02em; }
.cot-step-sub   { font-size:14px;color:var(--cot-text2);font-weight:400;margin:0 0 22px;line-height:1.6; }

/* ── SELECTOR DE CATEGORÍAS ── */
.cot-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.cot-cat-card {
  border:1.5px solid var(--cot-border);border-radius:var(--cot-radius-sm);
  padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;
  background:var(--cot-bg);transition:border-color .15s,background .15s,transform .1s;
  outline:none;
}
.cot-cat-card:hover,.cot-cat-card:focus { border-color:var(--cot-green);background:var(--cot-green-pale);transform:translateY(-1px); }
.cot-cat-card.cot-cat-sel { border:2px solid var(--cot-green);background:var(--cot-green-pale); }
.cot-cat-dot { width:16px;height:16px;border-radius:50%;flex-shrink:0; }
.cot-cat-info { flex:1;min-width:0; }
.cot-cat-name   { font-size:15px;font-weight:700;color:var(--cot-text); }
.cot-cat-tallas { font-size:11px;color:var(--cot-text2);margin-top:2px; }
.cot-cat-badge  { font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;flex-shrink:0;white-space:nowrap; }

/* ── SELECTOR DE TALLAS ── */
.cot-talla-section { margin-bottom:16px; }
.cot-talla-label { font-size:14px;font-weight:600;color:var(--cot-text);margin-bottom:10px; }
.cot-talla-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.cot-talla-card {
  border:1.5px solid var(--cot-border);border-radius:var(--cot-radius-sm);
  padding:12px 18px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:4px;background:var(--cot-bg);
  transition:border-color .15s,background .15s,transform .1s;
  outline:none;min-width:120px;flex:1;text-align:center;
}
.cot-talla-card:hover,.cot-talla-card:focus { border-color:var(--cot-green);background:var(--cot-green-pale);transform:translateY(-1px); }
.cot-talla-card.cot-talla-sel { border:2px solid var(--cot-green);background:var(--cot-green-pale); }
.cot-talla-num   { font-size:15px;font-weight:700;color:var(--cot-text); }
.cot-talla-precio{ font-size:13px;font-weight:600;color:var(--cot-green-dark);margin-top:2px; }
.cot-talla-desc  { font-size:11px;color:var(--cot-text2);margin-top:2px; }
.cot-talla-hint  { font-size:13px;color:var(--cot-text2);padding:8px 12px;background:var(--cot-bg2);border-radius:var(--cot-radius-sm);border-left:3px solid var(--cot-green);line-height:1.6; }

/* ── EXTRAS ── */
.cot-toggle-row { border:1.5px solid var(--cot-border);border-radius:var(--cot-radius-sm);padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;background:var(--cot-bg); }
.cot-toggle-info { flex:1; }
.cot-toggle-lbl   { font-size:15px;font-weight:600;color:var(--cot-text); }
.cot-toggle-sub   { font-size:12px;color:var(--cot-text2);margin-top:2px; }
.cot-toggle-price { font-size:13px;color:var(--cot-green-dark);font-weight:600;margin-top:4px; }
.cot-incl-badge   { font-size:11px;padding:4px 10px;border-radius:20px;background:var(--cot-green-pale);color:var(--cot-green-dark);display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0;font-weight:600; }
.cot-envio-box { border:1.5px solid var(--cot-amber-bdr);border-radius:var(--cot-radius-sm);padding:14px 16px;margin-top:4px;background:var(--cot-amber-bg);display:flex;align-items:flex-start;gap:12px; }
.cot-envio-icon  { font-size:22px;flex-shrink:0;margin-top:2px; }
.cot-envio-lbl   { font-size:15px;font-weight:600;color:var(--cot-amber-dark); }
.cot-envio-sub   { font-size:12px;color:var(--cot-amber-txt);margin-top:2px;line-height:1.5; }
.cot-envio-price { font-size:16px;font-weight:700;color:var(--cot-amber-dark);margin-top:4px; }
.cot-envio-nota  { font-size:11px;color:var(--cot-amber-txt);margin-top:3px;font-style:italic; }

/* TOGGLE */
.cot-tog { position:relative;width:42px;height:24px;flex-shrink:0; }
.cot-tog input { opacity:0;width:0;height:0;position:absolute; }
.cot-tog-sl { position:absolute;inset:0;background:var(--cot-border2);border-radius:12px;cursor:pointer;transition:.2s; }
.cot-tog-sl::before { content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s; }
.cot-tog input:checked + .cot-tog-sl { background:var(--cot-green); }
.cot-tog input:checked + .cot-tog-sl::before { transform:translateX(18px); }

/* ── BOTONES ── */
.cot-btn-row { display:flex;gap:12px;margin-top:22px; }
.cot-btn-next { background:var(--cot-green);color:#fff;border:none;border-radius:var(--cot-radius-sm);padding:13px 24px;font-size:15px;font-weight:600;font-family:var(--cot-font);cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .15s; }
.cot-btn-next:hover { background:var(--cot-green-dark); }
.cot-btn-next:disabled { opacity:.35;cursor:not-allowed; }
.cot-btn-back { background:transparent;border:1.5px solid var(--cot-border2);border-radius:var(--cot-radius-sm);padding:13px 18px;font-size:15px;font-family:var(--cot-font);color:var(--cot-text2);cursor:pointer;font-weight:500; }
.cot-btn-back:hover { background:var(--cot-bg2); }

/* ── RESULTADO ── */
.cot-res-badge { display:inline-block;background:var(--cot-green-pale);color:var(--cot-green-dark);font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;margin-bottom:12px; }
.cot-res-model { font-size:26px;font-weight:700;color:var(--cot-text);margin-bottom:4px;letter-spacing:-.02em; }
.cot-res-sub   { font-size:14px;color:var(--cot-text2);margin-bottom:14px; }
.cot-res-price-block { background:var(--cot-green-pale);padding:16px 20px;border-radius:var(--cot-radius-sm);margin-bottom:16px; }
.cot-res-price-total { font-size:36px;font-weight:700;color:var(--cot-green-dark);letter-spacing:-.03em;line-height:1.1; }
.cot-res-price-div   { border-top:1px solid var(--cot-green-light);margin:10px 0; }
.cot-res-price-row   { display:flex;justify-content:space-between;font-size:13px;color:var(--cot-text2);padding:3px 0; }
.cot-res-price-row span:last-child { font-weight:600;color:var(--cot-text); }
.cot-res-price-row.cot-extra span:last-child { color:var(--cot-green-dark); }
.cot-res-price-row.cot-envio-row span:last-child { color:var(--cot-amber-dark); }
.cot-res-desc { font-size:14px;color:var(--cot-text2);line-height:1.7;margin-bottom:16px;padding:12px 16px;background:var(--cot-bg2);border-radius:var(--cot-radius-sm); }
.cot-wa-btn {
  display:flex; align-items:center; justify-content:center; gap:12px;
  background: linear-gradient(135deg, #25D366 0%, #1aae50 100%);
  color:#fff; border:none; border-radius:var(--cot-radius-sm);
  padding:16px 24px; font-size:16px; font-weight:700;
  font-family:var(--cot-font); cursor:pointer; width:100%;
  letter-spacing:-.01em;
  box-shadow: 0 4px 16px rgba(37,211,102,.30);
  transition: transform .15s, box-shadow .15s;
}
.cot-wa-btn:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(37,211,102,.45); }
.cot-wa-btn:active { transform:translateY(0); }
.cot-wa-btn i { font-size:24px; }
.cot-restart {
  display: inline-flex; align-items:center; gap:7px;
  background: var(--cot-green-pale);
  border: 1.5px solid var(--cot-green);
  color: var(--cot-green-dark);
  border-radius: var(--cot-radius-sm);
  padding: 10px 22px;
  font-size: 14px; font-weight: 600;
  font-family: var(--cot-font);
  cursor: pointer;
  margin: 16px auto 0;
  transition: background .15s, color .15s, transform .1s;
}
.cot-restart:hover { background:var(--cot-green); color:#fff; border-color:var(--cot-green); transform:translateY(-1px); }

/* ── RESPONSIVE ── */
@media (max-width:800px) {
  :root { --cot-sidebar-w:100%; }
  .cot-header { padding:14px 18px; }
  .cot-body { flex-direction:column; }
  /* En móvil: resumen va ABAJO del formulario */
  .cot-left { order:2;width:100%;min-width:100%;flex-direction:row;flex-wrap:wrap;justify-content:center;border-left:none;border-top:1px solid var(--cot-border);padding:14px;gap:10px; }
  .cot-right { order:1; }
  .cot-chair-box { width:140px;height:140px; }
  .cot-svg { width:128px;height:128px; }
  .cot-price-box { min-width:160px;flex:1; }
  .cot-summary { width:100%; }
  .cot-right { padding:20px 16px; }
  .cot-step-title { font-size:18px; }
  .cot-nav-item { font-size:11px;padding:10px 4px; }
  .cot-nav-num { width:17px;height:17px;font-size:9px;margin-right:4px; }
  .cot-cat-grid { grid-template-columns:1fr 1fr; }
  .cot-talla-grid { gap:8px; }
  .cot-talla-card { min-width:90px; }
}

/* ── TIPO DE SILLA (estándar / cuadraplejia) ── */
.cot-section-label {
  font-size: 14px; font-weight: 700; color: var(--cot-text);
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--cot-green-pale);
}
.cot-tipo-grid { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.cot-tipo-card {
  flex:1; min-width:200px;
  border:1.5px solid var(--cot-border); border-radius:var(--cot-radius-sm);
  padding:16px 18px; cursor:pointer; display:flex; align-items:center; gap:14px;
  background:var(--cot-bg); transition:border-color .15s,background .15s,transform .1s; outline:none;
}
.cot-tipo-card:hover,.cot-tipo-card:focus { border-color:var(--cot-green);background:var(--cot-green-pale);transform:translateY(-1px); }
.cot-tipo-card.cot-tipo-sel { border:2.5px solid var(--cot-green);background:var(--cot-green-pale); }
.cot-tipo-icon { font-size:28px; color:var(--cot-green); flex-shrink:0; }
.cot-tipo-nombre { font-size:16px; font-weight:700; color:var(--cot-text); }
.cot-tipo-sub    { font-size:12px; color:var(--cot-text2); margin-top:2px; }

/* ── LLANTAS ── */
.cot-llantas-grid { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.cot-llantas-card {
  flex:1; min-width:160px;
  border:1.5px solid var(--cot-border); border-radius:var(--cot-radius-sm);
  padding:14px 16px; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:5px; background:var(--cot-bg); text-align:center;
  transition:border-color .15s,background .15s,transform .1s; outline:none;
}
.cot-llantas-card:hover,.cot-llantas-card:focus { border-color:var(--cot-green);background:var(--cot-green-pale);transform:translateY(-1px); }
.cot-llantas-card.cot-llantas-sel { border:2.5px solid var(--cot-green);background:var(--cot-green-pale); }
.cot-llantas-nombre { font-size:16px; font-weight:700; color:var(--cot-text); }
.cot-llantas-precio { font-size:17px; font-weight:700; color:var(--cot-green-dark); }
.cot-llantas-sub    { font-size:11px; color:var(--cot-text2); }

/* Espaciado entre secciones del paso 0 */
.cot-cat-grid  { margin-bottom:22px; }
.cot-talla-section  { margin-bottom:22px; }
.cot-llantas-section { margin-bottom:6px; }

/* ── PESO en tarjeta de categoría ── */
.cot-cat-peso {
  font-size: 11px; color: var(--cot-green-dark);
  font-weight: 600; margin-top: 3px;
}

/* ── GALERÍA DE FOTOS (hasta 3 por categoría) ── */
.cot-gallery-wrap {
  position: relative;
  width: 100%; height: 100%;
}
.cot-gallery-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  cursor: zoom-in;
}
.cot-gallery-img.cot-gal-act { opacity: 1; }

/* Puntos de navegación de la galería */
.cot-gallery-dots {
  position: absolute; bottom: 6px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 5px;
  z-index: 2;
}
.cot-gallery-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer; transition: background .2s, transform .2s;
  border: 1px solid rgba(0,0,0,.15);
}
.cot-gallery-dot.cot-dot-act {
  background: #fff;
  transform: scale(1.2);
}

/* Flechas prev/next de la galería */
.cot-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.35); color: #fff;
  border: none; border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; z-index: 2;
  transition: background .2s;
  padding: 0;
}
.cot-gallery-arrow:hover { background: rgba(0,0,0,.6); }
.cot-gallery-arrow.cot-arr-prev { left: 6px; }
.cot-gallery-arrow.cot-arr-next { right: 6px; }

/* ── MODAL DE ZOOM ── */
.cot-zoom-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.88);
  align-items: center; justify-content: center;
  cursor: zoom-out;
}
.cot-zoom-overlay.cot-zoom-open {
  display: flex;
}
.cot-zoom-overlay img {
  max-width: 90vw; max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
  object-fit: contain;
  cursor: zoom-out;
  animation: cotZoomIn .2s ease;
}
@keyframes cotZoomIn {
  from { transform: scale(.85); opacity:0; }
  to   { transform: scale(1);   opacity:1; }
}
.cot-zoom-close {
  position: absolute; top: 18px; right: 22px;
  background: rgba(255,255,255,.15); color: #fff;
  border: none; border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 20px; cursor: pointer; line-height: 36px;
  text-align: center; transition: background .2s;
}
.cot-zoom-close:hover { background: rgba(255,255,255,.3); }
/* Contador de fotos dentro del modal */
.cot-zoom-counter {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: 13px;
  font-family: var(--cot-font);
}
/* Flechas del modal */
.cot-zoom-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); color: #fff;
  border: none; border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.cot-zoom-nav:hover { background: rgba(255,255,255,.3); }
.cot-zoom-nav.cot-znav-prev { left: 20px; }
.cot-zoom-nav.cot-znav-next { right: 20px; }