/* ============================================================
   Crea en 3Di — estilos comunes de los generadores 3D.
   Adaptación del HTML estático original para vivir dentro de
   _Layout.cshtml: todo scopeado bajo .crea3di y sin topbar propia
   (el header lo aporta el sitio). Incluye overrides puntuales
   contra Bootstrap 3 (.row, .panel, .btn y label colisionan con
   clases del sitio).
   ============================================================ */

.crea3di {
    /* identidad */
    --dark: #141414;
    --accent: #18b4db;
    --accent-h: #0fa0c5;
    --cta: #1f6ff0;
    --cta-h: #185fd6;
    --orange: #ff9e1b;
    --orange2: #ffc933;
    --bg: #ffffff;
    --bg2: #f4f6f8;
    --panel: #ffffff;
    --line: #e3e7ec;
    --line2: #cfd6dd;
    --txt: #1d2430;
    --mut: #5d6b7a;
    --mut2: #8a96a3;
    --ok: #1d9e57;
    --warn: #b97d0a;
    --err: #d63b3b;
    --mono: 'SFMono-Regular', ui-monospace, Consolas, monospace;

    color: var(--txt);
    font: 14px/1.5 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

    /* compensa el header fijo del sitio (mismo alto que .site-section-top);
       el padding queda como banda oscura detrás del header translúcido */
    padding-top: 114px;
    background: #0c1118;
}

.crea3di, .crea3di * { box-sizing: border-box; }

/* márgenes que el reset global del HTML original aplicaba */
.crea3di h1, .crea3di h2, .crea3di h3, .crea3di p { margin: 0; }

.crea3di button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.crea3di input, .crea3di select, .crea3di textarea {
    font: inherit; color: var(--txt); background: #fff;
    border: 1px solid var(--line2); border-radius: 6px; padding: 7px 10px; outline: none;
}
.crea3di input:focus, .crea3di select:focus, .crea3di textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 2px rgba(24,180,219,.15);
}
.crea3di input[type=color] { padding: 2px; width: 44px; height: 32px; cursor: pointer; }
.crea3di input[type=range] { accent-color: var(--accent); padding: 0; border: none; background: none; box-shadow: none; }
.crea3di input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.crea3di ::-webkit-scrollbar { width: 10px; }
.crea3di ::-webkit-scrollbar-thumb { background: #c8cfd7; border-radius: 5px; }

/* ---------- vistas: en MVC cada página tiene una sola, siempre visible ---------- */
.crea3di .view { display: flex; }

/* ---------- home ---------- */
.crea3di .home { flex-direction: column; background: var(--bg); }
.crea3di .notice {
    position: relative; z-index: 3; background: #eaf7fb; border-bottom: 1px solid #cfe9f2; color: #27424f;
    font-size: 13px; text-align: center; padding: 9px 16px; line-height: 1.5;
}
.crea3di .notice a { color: #0f7ea0; font-weight: 800; text-decoration: none; }
.crea3di .notice a:hover { text-decoration: underline; }
.crea3di .notice a.wa { color: #1d8a45; }
.crea3di .hero {
    position: relative; background: linear-gradient(105deg,#0c1118 0%,#13202e 55%,#0e2233 100%);
    color: #fff; padding: 46px 6vw 52px; overflow: hidden;
}
.crea3di .hero h1 {
    font-size: clamp(26px,3.6vw,44px); font-weight: 800; line-height: 1.12; letter-spacing: .5px;
    text-transform: uppercase; max-width: 680px; position: relative; z-index: 2;
}
.crea3di .hero h1 em { font-style: normal; color: #52cdec; }
.crea3di .hero p { position: relative; z-index: 2; color: #b9c5d2; margin: 14px 0 22px; max-width: 560px; font-size: 15px; }
.crea3di .hero .cta {
    position: relative; z-index: 2; display: inline-block; background: var(--cta); color: #fff; font-weight: 800;
    font-size: 14px; letter-spacing: .8px; text-transform: uppercase; border-radius: 7px; padding: 13px 26px;
}
.crea3di .hero .cta:hover { background: var(--cta-h); }
.crea3di .hero .deco { position: absolute; right: -30px; top: 50%; transform: translateY(-50%) rotate(8deg); opacity: .16; z-index: 1; }
.crea3di .hero .stars { position: absolute; left: 6vw; top: 22px; display: flex; gap: 5px; z-index: 2; }
.crea3di .hero .stars svg { width: 13px; height: 13px; }
.crea3di .homebody { padding: 30px 6vw 56px; }
.crea3di .sechead { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 20px; }
.crea3di .sechead h2 { font-size: 20px; font-weight: 800; color: #111; }
.crea3di .sechead span { color: var(--mut2); font-size: 13px; }

/* badges de uso de cada generador (Tendencia / Máximo / Nuevo / etc.) */
.crea3di .uses {
    display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px;
    font-weight: 800; vertical-align: middle; white-space: nowrap; background: #eef1f4; color: #5a6a78;
}
.crea3di .uses.u-trend { background: #ff9e1b; color: #fff; }
.crea3di .uses.u-max { background: #18b4db; color: #fff; }
.crea3di .uses.u-many { background: #d9f1f9; color: #0f7ea0; }
.crea3di .uses.u-mid { background: #e8edf2; color: #51626f; }
.crea3di .uses.u-few { background: #f1f2f4; color: #7d8a96; }
.crea3di .uses.u-new { background: #dff5e4; color: #1d8a45; }

.crea3di .cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(225px,1fr)); gap: 18px; }
.crea3di .card {
    background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 16px 16px; display: flex;
    flex-direction: column; gap: 10px; text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(20,30,45,.05);
    transition: box-shadow .15s, border-color .15s, transform .15s;
    color: inherit; text-decoration: none;
}
.crea3di .card:hover, .crea3di .card:focus {
    border-color: var(--accent); box-shadow: 0 8px 22px rgba(20,30,45,.12); transform: translateY(-2px);
    color: inherit; text-decoration: none;
}
.crea3di .card .ic { height: 64px; display: flex; align-items: center; }
.crea3di .card .photo { width: 100%; height: 150px; object-fit: cover; border-radius: 7px; display: block; background: #0d1117; }
.crea3di .card h3 { font-size: 15.5px; font-weight: 800; color: #15202c; }
.crea3di .card p { color: var(--mut); font-size: 13px; flex: 1; line-height: 1.45; }
.crea3di .card .go {
    align-self: stretch; text-align: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 12.5px;
    letter-spacing: .8px; text-transform: uppercase; border-radius: 6px; padding: 9px;
}
.crea3di .card:hover .go { background: var(--accent-h); }

/* tarjeta destacada de cursos presenciales */
.crea3di .card.cursos {
    background: linear-gradient(165deg,#fff9ee 0%,#ffedd0 100%); border: 2px solid var(--cta);
    box-shadow: 0 6px 22px rgba(255,158,27,.32); position: relative; overflow: hidden;
}
.crea3di .card.cursos::before {
    content: "★ PRESENCIAL"; position: absolute; top: 13px; right: -30px; transform: rotate(38deg);
    background: var(--cta); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
    padding: 4px 34px; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.crea3di .card.cursos h3 { color: #7a4a00; }
.crea3di .card.cursos p { color: #8a6a3a; }
.crea3di .card.cursos .go { background: var(--cta); }

.crea3di .foot { margin-top: 46px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--mut2); font-size: 12.5px; text-align: center; }
.crea3di .foot b { color: var(--mut); }

/* ---------- galería "hecho con este generador" ---------- */
.crea3di .galsec .gal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.crea3di .galsec .gal figure { margin: 0; }
.crea3di .galsec .gal figure:last-child:nth-child(odd) { grid-column: 1/-1; }
.crea3di .galsec .gal img { width: 100%; border-radius: 8px; display: block; border: 1px solid var(--line); }
.crea3di .galsec .gal figcaption { font-size: 11.5px; color: var(--mut); margin-top: 4px; text-align: center; font-weight: 600; }

/* ---------- layout generador ---------- */
.crea3di .gen {
    flex-direction: row; background: var(--bg2);
    height: calc(100vh - 114px); min-height: 540px;
}
/* override de .panel de Bootstrap 3 además de los estilos propios */
.crea3di .panel {
    width: 404px; min-width: 404px; background: var(--panel);
    border: none; border-right: 1px solid var(--line); border-radius: 0;
    overflow-y: auto; padding: 14px 16px 28px;
    margin-bottom: 0; box-shadow: none;
}
.crea3di .stage { flex: 1; position: relative; background: radial-gradient(900px 520px at 55% 35%,#ffffff 0%,#e9edf2 75%); }
.crea3di .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.crea3di .viewbtns { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 5; }
.crea3di .viewbtns button {
    background: #fff; border: 1px solid var(--line2); border-radius: 6px; padding: 6px 12px; font-size: 12.5px;
    font-weight: 700; color: var(--mut);
}
.crea3di .viewbtns button:hover { color: var(--accent); border-color: var(--accent); }
.crea3di .backrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.crea3di .backrow button, .crea3di .backrow a.back {
    color: var(--mut); font-size: 13px; font-weight: 700; padding: 5px 8px; border-radius: 6px; text-decoration: none;
}
.crea3di .backrow button:hover, .crea3di .backrow a.back:hover { color: var(--accent); background: var(--bg2); text-decoration: none; }
.crea3di .backrow h2 { font-size: 16px; font-weight: 800; letter-spacing: .2px; color: #111; }
.crea3di .sec { border-top: 1px solid var(--line); padding: 13px 0 5px; margin-top: 6px; }
.crea3di .sec > h3 { font-size: 11px; letter-spacing: 1.6px; color: var(--mut2); font-weight: 800; margin-bottom: 10px; }

/* override de .row de Bootstrap 3 (márgenes negativos y clearfix) */
.crea3di .row { display: flex; align-items: center; gap: 9px; margin: 0 0 9px 0; }
.crea3di .row::before, .crea3di .row::after { content: none; display: none; }
.crea3di .row label { flex: 1; color: #3c4a59; font-size: 13px; font-weight: 400; margin-bottom: 0; }
.crea3di .row .val { font-family: var(--mono); font-size: 12px; color: var(--mut2); }
.crea3di .pair { display: flex; align-items: center; gap: 8px; flex: 1.35; }
.crea3di .pair input[type=range] { flex: 1; }
.crea3di .pair input[type=number] { width: 64px; padding: 5px 7px; font-family: var(--mono); font-size: 12.5px; text-align: right; }
.crea3di textarea { width: 100%; resize: vertical; min-height: 60px; font-family: inherit; }
.crea3di .help { color: var(--mut2); font-size: 12px; margin: -4px 0 9px; }
.crea3di .seg { display: flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; margin-bottom: 9px; }
.crea3di .seg button { flex: 1; padding: 8px 6px; font-size: 12.5px; font-weight: 700; color: var(--mut); background: #fff; }
.crea3di .seg button.on { background: var(--accent); color: #fff; }

/* override de .btn de Bootstrap 3 además de los estilos propios */
.crea3di .btn {
    display: block; width: 100%; text-align: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 12.5px;
    letter-spacing: .7px; text-transform: uppercase; border-radius: 7px; padding: 11px; margin-bottom: 8px;
    border: none; white-space: normal;
}
.crea3di .btn:hover, .crea3di .btn:focus { background: var(--accent-h); color: #fff; }
.crea3di .btn[disabled] { opacity: .45; cursor: default; }
.crea3di .btn.sec2 { background: #fff; color: #2c3a48; border: 1px solid var(--line2); text-transform: none; font-weight: 700; letter-spacing: 0; }
.crea3di .btn.sec2:hover, .crea3di .btn.sec2:focus { border-color: var(--accent); color: var(--accent); background: #fff; }
.crea3di .btnrow { display: flex; gap: 8px; }
.crea3di .btnrow .btn { flex: 1; }
.crea3di .status { min-height: 18px; font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.crea3di .status.ok { color: var(--ok); }
.crea3di .status.warn { color: var(--warn); }
.crea3di .status.err { color: var(--err); }
.crea3di .warnbox {
    display: none; background: #fdf6e7; border: 1px solid #ecd9ae; color: #8a6210; font-size: 12.5px; border-radius: 7px;
    padding: 8px 10px; margin-bottom: 9px;
}
.crea3di .dims {
    font-family: var(--mono); font-size: 12px; color: #39434e; background: var(--bg2); border: 1px solid var(--line);
    border-radius: 7px; padding: 7px 10px; margin-bottom: 9px; white-space: pre-line;
}
.crea3di .hint {
    display: none; font-size: 12px; color: #41525f; background: #eef8fb; border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0; padding: 8px 10px; margin-bottom: 9px;
}
.crea3di .hint.show { display: block; }
.crea3di .swatch { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.crea3di .swatch span { flex: 1; color: #3c4a59; font-size: 13px; }
.crea3di .swapbtn { border: 1px solid var(--line2); border-radius: 6px; padding: 5px 10px; color: var(--mut); font-size: 15px; background: #fff; }
.crea3di .swapbtn:hover { color: var(--accent); border-color: var(--accent); }
.crea3di .chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 10px; }
.crea3di .chip { border: 1px solid var(--line2); border-radius: 7px; background: #fff; padding: 7px 4px 5px; text-align: center; cursor: pointer; }
.crea3di .chip:hover { border-color: var(--accent); }
.crea3di .chip.on { border-color: var(--accent); background: #e8f7fb; box-shadow: inset 0 0 0 1px var(--accent); }
.crea3di .chip .aa { font-size: 19px; line-height: 1.15; display: block; color: #15202c; }
.crea3di .chip small { color: var(--mut2); font-size: 9.5px; letter-spacing: .2px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crea3di .filebtn {
    display: block; border: 1.5px dashed var(--line2); border-radius: 7px; text-align: center; color: var(--mut); font-size: 13px;
    font-weight: 600; padding: 11px; cursor: pointer; margin-bottom: 9px; background: #fbfcfd;
}
.crea3di .filebtn:hover { border-color: var(--accent); color: var(--accent); }
.crea3di .thumbwrap { display: none; align-items: center; gap: 10px; margin-bottom: 10px; }
.crea3di .thumbwrap canvas { width: 86px; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.crea3di .thumbwrap .meta { font-family: var(--mono); font-size: 11.5px; color: var(--mut); }

/* ---------- zona de carga de archivos (vectorizar / presupuesto) ---------- */
.crea3di .drop {
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
    border: 2px dashed var(--line2); border-radius: 9px; padding: 18px 12px; cursor: pointer;
    background: #fbfcfd; transition: border-color .12s, background .12s;
}
.crea3di .drop:hover { border-color: var(--accent); background: #f4fbfd; }
.crea3di .drop.over { border-color: var(--accent); background: #e8f7fb; box-shadow: inset 0 0 0 1px var(--accent); }
.crea3di .drop b { color: #1f2d3a; font-size: 13.5px; }
.crea3di .drop span { color: var(--mut2); font-size: 11.5px; }

/* ---------- presupuesto: tabla de cotización ---------- */
.crea3di .headline {
    font: 800 23px/1.1 system-ui, sans-serif; color: var(--accent); text-align: center;
    padding: 6px 0 10px; letter-spacing: .2px;
}
.crea3di .quote { font-size: 13px; color: #2c3742; margin-bottom: 10px; }
.crea3di .qrow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px; }
.crea3di .qrow span:first-child { color: #54616e; }
.crea3di .qrow span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crea3di .qrow.strong { font-weight: 800; color: #15202c; font-size: 14.5px; padding-top: 7px; }
.crea3di .qrow.strong span:first-child { color: #15202c; }
.crea3di .qsep { height: 1px; background: var(--line); margin: 6px 0; }

/* ---------- presupuesto: panel derecho sin visor 3D ---------- */
.crea3di .stage-quote { display: flex; align-items: center; justify-content: center; padding: 28px; }
.crea3di .quote-hero { max-width: 360px; text-align: center; }
.crea3di .quote-hero-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; color: var(--mut); margin-bottom: 8px; }
.crea3di .quote-hero-big { font: 800 44px/1.05 system-ui, sans-serif; color: var(--accent); margin-bottom: 14px; word-break: break-word; }
.crea3di .quote-hero-help { font-size: 13px; color: #54616e; line-height: 1.5; }

@media (max-width: 840px) {
    .crea3di .gen { flex-direction: column; }
    .crea3di .panel { width: 100%; min-width: 0; max-height: 55%; border-right: none; border-bottom: 1px solid var(--line); order: 1; }
    .crea3di .stage { order: 2; }
    .crea3di .hero .deco { display: none; }
}

/* ---------- galería: botones por pieza ---------- */
.crea3di .galsec .galbtns { display: flex; gap: 5px; margin-top: 5px; }
.crea3di .galsec .galbtns button {
  flex: 1; border: 1px solid var(--line); background: #fff; color: #41525f;
  font: 700 10.5px/1 system-ui, sans-serif; padding: 6px 2px; border-radius: 7px; cursor: pointer;
}
.crea3di .galsec .galbtns button:hover { border-color: var(--accent); color: var(--accent); background: #f2fbfd; }
.crea3di .galsec .galbtns button[data-galact="edit"] { color: #b06d00; }
.crea3di .galsec .galbtns button[data-galact="edit"]:hover { border-color: var(--cta); color: var(--cta); background: #fff8ec; }