/* Conversor imagen → patrón (BETA) · prefijo .fcv- · v6.7.0.0 */

.fcv-app { max-width: 1200px; margin: 0 auto; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.fcv-banner { background:#fff8e1; border:1px solid #ffe082; border-radius:10px; padding:10px 16px; font-size:13px; margin-bottom:16px; }

.fcv-layout { display:grid; grid-template-columns: 290px 1fr; gap:20px;
    grid-template-areas: "drop drop" "controls main" "controls bottom"; }
.fcv-layout > .fcv-drop { grid-area: drop; }
.fcv-controls { grid-area: controls; }
.fcv-main { grid-area: main; }
.fcv-bottom { grid-area: bottom; min-width: 0; }
@media (max-width: 800px) {
    /* Móvil: imagen → controles AL LADO (debajo inmediato) → compra/recuento */
    .fcv-layout { grid-template-columns: 1fr;
        grid-template-areas: "drop" "main" "controls" "bottom"; }
}

.fcv-controls { display:flex; flex-direction:column; gap:14px; }

.fcv-drop { border:2px dashed #94A3B8; border-radius:14px; padding:22px 14px; text-align:center; cursor:pointer; background:#f8fafc; transition:all .15s; font-size:14px; }
.fcv-drop:hover, .fcv-drop.over { border-color:#3B82F6; background:#eff6ff; }
.fcv-drop small { color:#64748B; }

.fcv-group { background:#fff; border:1px solid #E2E8F0; border-radius:12px; padding:12px 14px; }
.fcv-group > label { display:block; font-size:13px; font-weight:600; color:#0F172A; margin-bottom:6px; }
.fcv-group select { width:100%; padding:7px 8px; border:1px solid #E2E8F0; border-radius:8px; font-size:13px; background:#fff; }
.fcv-group input[type=range] { width:100%; }
.fcv-hint { font-size:12px; color:#64748B; margin-top:4px; }

.fcv-sliders label, .fcv-checks label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; margin:6px 0; color:#0F172A; }
.fcv-sliders input[type=range] { flex:1; }

.fcv-btn-pri, .fcv-btn-sec { width:100%; padding:10px 0; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; margin:4px 0; }
.fcv-btn-pri { border:1.5px solid rgba(29,78,216,.8); background:linear-gradient(to bottom, #60a5fa, #2563eb); color:#fff; }
.fcv-btn-sec { border:1.5px solid #E2E8F0; background:#fff; color:#0F172A; }
.fcv-btn-pri:disabled, .fcv-btn-sec:disabled { opacity:.45; cursor:not-allowed; }

.fcv-main { min-width:0; }
.fcv-canvas-wrap { position:relative; background:repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 20px 20px; border:1px solid #E2E8F0; border-radius:12px; overflow:auto; max-height:70vh; display:flex; align-items:flex-start; justify-content:center; }
#fcv-canvas { display:block; max-width:100%; height:auto; image-rendering:auto; }
.fcv-empty { padding:80px 20px; color:#94A3B8; font-size:15px; }

.fcv-stats { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; font-size:13px; }
.fcv-stats span { background:#fff; border:1px solid #E2E8F0; border-radius:20px; padding:5px 14px; }
.fcv-stats b { color:#2563eb; }

.fcv-counts { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.fcv-count { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #E2E8F0; border-radius:10px; padding:6px 10px; font-size:12px; }
.fcv-count .sw { width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex-shrink:0; }
.fcv-count b { font-family:monospace; }
.fcv-count small { color:#64748B; }

.fcv-proposal { margin-top:28px; background:#fff; border:1px solid #E2E8F0; border-radius:14px; padding:6px 18px; }
.fcv-proposal summary { font-weight:700; font-size:15px; padding:10px 0; cursor:pointer; }
.fcv-proposal-body { font-size:14px; line-height:1.65; color:#334155; padding-bottom:14px; }
.fcv-proposal-body h3 { font-size:14px; margin:14px 0 4px; color:#0F172A; }

/* Segmented control de estilo (v2.1) */
.fcv-seg { display:flex; flex-direction:column; gap:6px; }
.fcv-seg label { display:flex; align-items:center; gap:8px; border:1.5px solid #E2E8F0; border-radius:10px; padding:8px 12px; cursor:pointer; font-size:13px; font-weight:600; color:#0F172A; background:#fff; transition:all .12s; }
.fcv-seg label:hover { border-color:#93c5fd; }
.fcv-seg label:has(input:checked) { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.fcv-seg input { accent-color:#2563eb; }

/* UX movil: imagen -> resultado -> opciones (orden movil v2.2) */
.fcv-layout > .fcv-drop { grid-column: 1 / -1; padding: 30px 18px; font-size: 15px; }
@media (max-width: 800px) {
  .fcv-layout > .fcv-drop { order: 1; }
  .fcv-main { order: 2; }
  .fcv-controls { order: 3; }
}

/* Acciones comerciales (fase 2A) */
.fcv-actions { margin: 4px 0 14px; }
.fcv-actions .fcv-btn-pri { width: auto; padding: 11px 22px; }
.fcv-actions .fcv-hint { margin-top: 4px; }

/* Copy SEO (publicación 6.7.3.0) */
.fcv-seo { max-width: 760px; margin: 36px auto 8px; font-size: 15px; line-height: 1.7; color: #334155; }
.fcv-seo h2 { font-size: 20px; color: #0F172A; margin-bottom: 10px; }
.fcv-seo p { margin-bottom: 12px; }

/* Hero del conversor (publicación heroes) */
.fcv-hero { border-radius: 18px; margin-bottom: 18px; text-align: center; overflow: hidden;
    padding: 22px 20px 0; min-height: clamp(150px, 17vw, 230px);
    background: linear-gradient(rgba(248,250,252,.85) 0%, rgba(248,250,252,.55) 28%, rgba(248,250,252,0) 52%),
        url('/wp-content/uploads/2026/06/hero-conversor-gato.webp') center bottom / cover no-repeat; }
.fcv-hero h1 { font-size: clamp(24px, 3.6vw, 38px); font-weight: 800; color: #0F172A; margin: 0 0 10px; letter-spacing: -0.02em; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 12px #fff, 0 0 28px rgba(255,255,255,.85); }
.fcv-hero p { font-size: clamp(14px, 1.6vw, 17px); color: #1e293b; font-weight: 600; line-height: 1.6; margin: 0; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 10px #fff, 0 0 22px rgba(255,255,255,.85); }
@media (max-width: 640px) { .fcv-hero { padding-top: 18px; min-height: 150px; } }