/* Brand-consistent styles (vertical responsive carnet) */
.cec-card-wrap{ display:grid; grid-template-columns: 1fr; gap:16px; align-items:start; justify-items:center; padding:14px }
@media(min-width:1024px){ .cec-card-wrap{ grid-template-columns: 460px 1fr; } }
.vcard{ width:min(92vw,460px); aspect-ratio:9/16; background:#fff; border-radius:26px; overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.35), 0 10px 20px rgba(0,0,0,.25); display:flex; flex-direction:column }
.v-top{ background:linear-gradient(180deg, var(--amarillo, #fdf800), #ffee00); padding:14px; display:flex; align-items:center; gap:10px }
.v-top img{ height:40px; width:auto }
.v-top .badge{ margin-left:auto; font-size:12px; font-weight:900; color:var(--azul, #0b1828);
  background:rgba(11,24,40,.08); border:1px dashed rgba(11,24,40,.35); padding:6px 10px; border-radius:999px }
.v-hero{ background:linear-gradient(180deg, #131f35, var(--azul, #0b1828)); color:#fff; padding:18px 16px 8px 16px }
.idrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.chip{ background:var(--amarillo, #fdf800); color:var(--azul, #0b1828); font-weight:900; font-size:12px; padding:6px 10px; border-radius:999px;
  box-shadow:0 4px 12px rgba(253,248,0,.3) }
.muted{ color:#cbd5e1; font-size:12px }
.v-hero h1{ margin:4px 0 0 0; font-size:26px; line-height:1.15 }
.v-hero p{ margin:6px 0 0 0; color:#dbe5ff; font-size:13px }
.v-body{ flex:1; display:flex; flex-direction:column; gap:12px; padding:12px 16px 16px; background:#fff }
.v-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.photo{ grid-column:1 / -1; height:38vh; min-height:280px; max-height:420px; border-radius:18px; overflow:hidden; background:#e5e7eb;
  display:grid; place-items:center; border:1px solid #e5e7eb; box-shadow:0 10px 24px rgba(0,0,0,.18) }
.photo img{ width:100%; height:100%; object-fit:cover }
#cec_foto_ph{ color:#334155; font-weight:700 }
.field{ background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px }
.field label{ display:block; font-size:12px; color:#64748b }
.field div{ font-size:15px; font-weight:800; color:#0b1828 }
.cta-verify{ display:flex; gap:10px; align-items:center; justify-content:space-between; border:1px solid #e5e7eb; border-radius:14px; padding:10px 12px; background:#fff }
.qrbox{ width:110px; height:110px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; display:grid; place-items:center }
.qrbox img{ width:100%; height:100%; object-fit:contain }
.verify-copy{ font-size:12px; color:#334155 }
.verify-url{ font-weight:800; color:#0b1828; word-break:break-all; font-size:12px }

/* editor */
.panel{ width:min(92vw,560px); background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; box-shadow:0 12px 40px rgba(0,0,0,.15) }
.panel-head{ font-weight:900; color:#0b1828; margin-bottom:8px; font-size:16px }
.panel .grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.panel .grid label{ display:grid; gap:4px; color:#0b1828; font-weight:600; font-size:13px }
.panel .in{ width:100%; padding:10px; border-radius:10px; border:1px solid #e5e7eb; outline:none }
.panel .in:focus{ border-color:#94a3b8 }
.panel-actions{ display:flex; gap:8px; margin-top:10px }
.btn{ appearance:none; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:800; letter-spacing:.2px }
.btn-yellow{ background:var(--amarillo, #fdf800); color:var(--azul, #0b1828) }
.btn-ghost{ background:transparent; color:#0b1828; border:1px solid #e5e7eb }
.small{ font-size:12px } .muted{ color:#64748b }

/* v1.4.3: Fix mobile cut-off */
@media(max-width: 480px){
  .cec-card-wrap{ padding: 10px; grid-template-columns: 1fr; min-height: 100vh; align-content: start; }
  .vcard{ width: 100%; max-width: 100%; /* quitar aspect en móviles */ aspect-ratio: auto; height: auto; }
  .v-body{ padding-bottom: 18px; }
  .photo{ min-height: 220px; }
}