:root{
      --muted:#94a3b8;
      --text:#e2e8f0;
      --border:rgba(148,163,184,.25);
      --accent:#ef4444;
      --ok:#22c55e;
    }
    *{box-sizing:border-box}
    .wrap{
      max-width:1600px;
      margin:0 auto;
      padding:12px 18px 28px;
      display:grid;
      grid-template-columns: 520px 1fr;
      gap:24px;
    }
    @media screen and (max-width: 1199px) {
      .wrap {
        grid-template-columns: 1fr;
      }
    }
    .card{
      border:1px solid var(--border);
      border-radius:18px;
      padding:24px;
    }
    /* Sistema de columnas Bootstrap dentro del generador */
    .wrap .row {
      display: flex;
      flex-wrap: wrap;
      margin-left: -10px;
      margin-right: -10px;
      margin-bottom: 16px;
    }
    .wrap .row:last-child {
      margin-bottom: 0;
    }
    .wrap .row > [class*="col-"] {
      padding-left: 10px;
      padding-right: 10px;
    }
    .wrap .col-md-6 {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .wrap .col-md-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
    @media screen and (max-width: 767px) {
      .wrap .col-md-6,
      .wrap .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
      }
      .wrap .col-md-6 {
        margin-bottom: 16px;
      }
      .wrap .col-md-6:last-child {
        margin-bottom: 0;
      }
    }
    /* Estilos para quform-element form-group */
    .wrap .quform-element.form-group {
      margin-bottom: 0;
    }
    .wrap .quform-element.form-group label {
      display: block;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
      font-size: 12px !important;
    }
    /* Inputs, selects y textareas con mismo tamaño */
    .wrap input,
    .wrap select,
    .wrap textarea {
      width: 100%;
      border-radius: 8px;
      border: 1px solid var(--border);
      padding: 10px 12px;
      font-size: 14px;
      line-height: 1.5;
      outline: none;
      transition: border-color 0.2s;
    }
    .wrap input:focus,
    .wrap select:focus,
    .wrap textarea:focus {
      border-color: var(--accent);
    }
    .wrap select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }
    .wrap textarea {
      min-height: 84px;
      resize: vertical;
    }
    .wrap input[readonly] {
      background-color: #f5f5f5;
      cursor: not-allowed;
    }
    label{display:block; font-size:13px !important; margin:0 0 8px; font-weight: 500;}
    input, select, textarea{
      width:100%;
      border-radius:12px;
      border:1px solid var(--border);
      padding:10px 10px;
      outline:none;
    }
    textarea{min-height:84px; resize:vertical}
    .row{margin-bottom:10px}
    .btns{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
    button{
      border-radius:12px;
      border:1px solid var(--border);
      /* background:rgba(2,6,23,.55); */
      /* color:var(--text); */
      padding:10px 12px;
      cursor:pointer;
      font-weight:600;
    }
    button.primary{background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.55)}
    button:disabled{opacity:.55; cursor:not-allowed}
    .hint{font-size:12px; color:var(--muted); line-height:1.35}
    .warn{font-size:12px; color:#fbbf24; line-height:1.35}
    .ok{font-size:12px; color:#34d399}
    .previewWrap{
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:stretch;
      justify-content:flex-start;
    }
    .a4Shell{
      background:#fff;
      border-radius:10px;
      overflow:hidden;
      border:1px solid rgba(0,0,0,.12);
      width:100%;
      max-width:760px;
      margin:0 auto;
    }
    .a4Inner{
      width:1240px; /* “A4” en px (aprox) */
      height:1754px;
      transform-origin: top left;
      background:#fff;
    }
    .toolsLine{
      display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; font-size:12px;
    }
    .toolsLine a{color:var(--text)}
    .small{font-size:11px}
    .pill{
      display:inline-flex; gap:8px; align-items:center;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      /* background:rgba(2,6,23,.35); */
    }
    .dot{
      width:10px;height:10px;border-radius:50%;
      display:inline-block;
      border:1px solid rgba(0,0,0,.18);
    }