@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

     :root{
      /* RondApp Brand System */
      --bg:#f4f7fb;
      --panel:#ffffff;
      --panel-2:#f7f9fc;
      --text:#0B1220;
      --muted:#62708a;
      --line:#dce4ef;
      --blue:#2563EB;
      --blue-2:#0F2D6B;
      --red:#F04B5D;
      --soft-gray:#E8EDF5;
      --good:#22a06b;
      --warn:#d18b2c;
      --shadow:0 14px 36px rgba(15,45,107,.10);
      --shadow-soft:0 8px 24px rgba(15,45,107,.07);
      --radius:14px;
    }

    *{box-sizing:border-box}
    html,body{
      width:100%;
      height:100%;
      overflow:hidden;
    }

    body{
      margin:0;
      height:100vh;
      background:
        radial-gradient(circle at 8% 0%, rgba(37,99,235,.08), transparent 26%),
        radial-gradient(circle at 100% 100%, rgba(15,45,107,.05), transparent 30%),
        linear-gradient(180deg,#fbfdff 0%, var(--bg) 100%);
      color:var(--text);
      font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
      font-optical-sizing:auto;
    }

    button,input,select{font:inherit}
    .app{
      width:100%;
      height:100vh;
      overflow:hidden;
      display:grid;
      grid-template-rows:72px minmax(0,1fr);
    }

    header{
      height:72px;
      min-height:72px;
      padding:10px 22px;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      background:rgba(255,255,255,.92);
      backdrop-filter:blur(16px);
      position:sticky;
      top:0;
      z-index:30;
    }

    .brand{display:flex;align-items:center;gap:10px;}
    .brand-logo{
      display:block;
      width:auto;
      height:48px;
      object-fit:contain;
    }
    .brand-fallback{
      display:flex;
      align-items:baseline;
      font-size:20px;
      font-weight:800;
      letter-spacing:-.04em;
      white-space:nowrap;
    }
    .brand-fallback .rond{color:var(--blue-2)}
    .brand-fallback .app-word{color:var(--blue)}
    .brand-divider{
      width:1px;
      height:28px;
      background:var(--line);
      margin:0 2px;
    }
    .brand-product{
      display:flex;
      flex-direction:column;
      line-height:1.05;
      min-width:0;
    }
    .brand-product strong{
      font-size:15px;
      font-weight:700;
      color:var(--blue-2);
      letter-spacing:-.02em;
    }
    .brand-product small{
      display:block;
      color:var(--muted);
      margin-top:4px;
      font-size:10px;
      font-weight:600;
      letter-spacing:.04em;
    }

    .header-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
    .header-switch{
      display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;
      background:var(--panel-2);color:var(--text);font-size:12px;font-weight:600;
      border:1px solid var(--line);
    }
    .btn{
      border:0;border-radius:12px;padding:11px 15px;cursor:pointer;font-weight:600;
      transition:.18s ease;
    }
    .btn:disabled{cursor:not-allowed;opacity:.45}
    .btn:hover:not(:disabled){transform:translateY(-1px)}
    .btn-secondary{background:#fff;color:var(--blue-2);border:1px solid var(--line);box-shadow:0 2px 8px rgba(15,45,107,.03)}
    .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.22)}
    .btn-blue{background:var(--blue);color:#fff}

    main{
      display:grid;
      grid-template-columns:300px minmax(0,1fr) 310px;
      grid-template-rows:minmax(0,1fr) 104px;
      height:calc(100vh - 72px);
      min-height:0;
      overflow:hidden;
    }

    aside{
      min-height:0;
      padding:20px;
      overflow:auto;
      background:rgba(255,255,255,.38);
    }
    .left{border-right:1px solid var(--line)}
    .right{
      border-left:1px solid var(--line);
      display:flex;
      flex-direction:column;
    }

    .section{margin-bottom:22px}
    .section-title{
      margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;
      color:var(--muted);font-weight:700;
    }

    .upload{
      display:block;
      width:100%;
      border:1.5px dashed #c3cad1;border-radius:14px;background:var(--panel);
      padding:18px;text-align:center;cursor:pointer;transition:.2s ease;
    }
    .upload.drag{border-color:var(--blue);background:#f4f8ff;transform:scale(1.01)}
    .upload-icon{
      width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;
      background:var(--panel-2);color:var(--blue);font-size:21px;border:1px solid var(--line);
    }
    .upload strong{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:15px}
    .upload span{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.4}
    .file-input{display:none}

    .presets{display:grid;grid-template-columns:1fr 1fr;gap:9px}
    .preset{
      border:1px solid var(--line);background:var(--panel);border-radius:12px;
      padding:12px;text-align:left;cursor:pointer;min-height:74px;transition:.18s ease;
    }
    .preset:hover{border-color:#c3cad1}
    .preset.active{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:#eef2f6}
    .preset strong{display:block;font-size:13px;font-weight:700}
    .preset span{display:block;color:var(--muted);font-size:11px;margin-top:5px;line-height:1.25}
    .preset em{display:block;color:var(--blue);font-size:11px;font-style:italic;font-weight:600;margin-top:3px}

    .control{
      background:var(--panel);border:1px solid var(--line);border-radius:14px;
      padding:14px;margin-bottom:10px;
    }
    .control-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
    .control label{font-size:12px;font-weight:600}
    .value{color:var(--muted);font-size:12px;font-style:italic}
    input[type=range]{width:100%;accent-color:var(--blue)}

    .custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
    .field label{display:block;font-size:11px;font-weight:600;margin-bottom:6px;color:var(--muted)}
    .field input,.field select{
      width:100%;border:1px solid var(--line);border-radius:3px;padding:10px 11px;background:#fff;
      color:var(--text);outline:none;font-family:"Plus Jakarta Sans",sans-serif;
    }
    .field input:focus,.field select:focus{
      border-color:var(--blue);box-shadow:0 0 0 3px rgba(154,91,18,.12)
    }

    .button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .button-grid.three{grid-template-columns:1fr 1fr 1fr}
    .mini-btn{
      border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:10px 9px;cursor:pointer;
      font-size:12px;font-weight:600;color:var(--text)
    }
    .mini-btn:hover{border-color:#c3cad1;background:var(--panel-2)}
    .micro-btn{
      border:0;background:var(--panel-2);color:var(--text);border-radius:8px;padding:5px 7px;
      font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--line);
    }
    .micro-btn:disabled{opacity:.45;cursor:not-allowed}

    .workspace{
      position:relative;
      min-width:0;
      min-height:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:26px 26px 8px;
      overflow:hidden;
    }
    .workspace-inner{
      width:100%;
      height:100%;
      min-height:0;
      border-radius:6px;
      border:1px solid var(--line);
      background:
        radial-gradient(circle, #d6dbe0 1.3px, transparent 1.3px) 0 0/16px 16px,
        var(--panel-2);
      box-shadow:inset 0 0 0 1px rgba(33,28,20,.03);
      display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
    }
    .empty{max-width:420px;text-align:center;padding:30px;color:var(--muted)}
    .empty .big{
      font-family:"Plus Jakarta Sans",sans-serif;font-style:italic;color:var(--text);font-size:26px;
      margin-bottom:10px;font-weight:600;
    }

    .crop-stage{
      position:relative;box-shadow:0 10px 26px rgba(28,32,36,.18);background:transparent;overflow:hidden;
      cursor:grab;touch-action:none;display:none;
    }
    .crop-stage.dragging{cursor:grabbing}
    #previewCanvas{width:100%;height:100%;display:block}
    .safe-area{
      pointer-events:none;position:absolute;inset:6%;
      border:1px dashed rgba(255,255,255,.9);
      outline:1px dashed rgba(0,0,0,.75);
      outline-offset:-2px;
      border-radius:2px;display:none;
    }
    .safe-area.show{display:block}

    .info-card{
      background:var(--panel);border:1px solid var(--line);border-radius:5px;
      padding:15px;margin-bottom:12px;
    }
    .info-card h3{margin:0 0 12px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-style:italic;font-size:14px}
    .stat{
      display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;
      border-bottom:1px solid var(--line);font-size:12px;
    }
    .stat:last-child{border-bottom:0}
    .stat span:first-child{color:var(--muted)}
    .stat strong{text-align:right}

    .switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .switch{position:relative;width:44px;height:26px}
    .switch input{display:none}
    .slider{position:absolute;inset:0;border-radius:999px;background:#ccd9df;cursor:pointer;transition:.2s}
    .slider:before{
      content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;
      box-shadow:0 2px 6px rgba(0,0,0,.15);transition:.2s
    }
    .switch input:checked + .slider{background:var(--blue)}
    .switch input:checked + .slider:before{transform:translateX(18px)}

    .status{
      position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
      padding:9px 13px;border-radius:3px;background:var(--blue-2);color:#fff;font-size:12px;
      box-shadow:0 8px 24px rgba(31,46,38,.28);opacity:0;pointer-events:none;transition:.2s;z-index:8;
    }
    .status.show{opacity:1}

    .original-view-btn{
      position:absolute;
      top:16px;
      right:16px;
      z-index:7;
      border:0;
      border-radius:3px;
      padding:9px 12px;
      background:var(--blue-2);
      color:#fff;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      box-shadow:0 8px 24px rgba(31,46,38,.28);
    }
    .original-view-btn:disabled{opacity:.45;cursor:not-allowed}

    .thumb .remove{
      position:absolute;
      top:6px;
      right:6px;
      width:18px;
      height:18px;
      border:0;
      border-radius:50%;
      background:rgba(33,28,20,.8);
      color:#fff;
      display:none;
      place-items:center;
      font-size:12px;
      cursor:pointer;
      z-index:2;
    }
    .thumb:hover .remove{display:grid}
    .thumb.dragging-thumb{opacity:.45}
    .thumb.drag-over{outline:2px dashed var(--blue);outline-offset:2px}

    .modal-backdrop{
      position:fixed;
      inset:0;
      z-index:100;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(20,16,10,.5);
      backdrop-filter:blur(4px);
      padding:24px;
    }
    .modal-backdrop.show{display:flex}
    .modal-card{
      width:min(720px,100%);
      max-height:min(78vh,760px);
      overflow:hidden;
      border-radius:8px;
      background:#fff;
      box-shadow:0 30px 80px rgba(20,16,10,.32);
      display:grid;
      grid-template-rows:auto 1fr;
    }
    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:20px;
      padding:22px 22px 16px;
      border-bottom:1px solid var(--line);
    }
    .modal-kicker{
      font-size:12px;
      color:var(--muted);
      font-weight:600;
      font-style:italic;
    }
    .modal-head h2{
      margin:4px 0 0;
      font-family:"Plus Jakarta Sans",sans-serif;
      font-weight:700;
      font-size:22px;
    }
    .modal-close{
      width:36px;
      height:36px;
      border:1px solid var(--line);
      border-radius:3px;
      background:var(--panel-2);
      font-size:22px;
      line-height:1;
      cursor:pointer;
      color:var(--text);
    }
    .changelog-list{
      overflow:auto;
      padding:10px 22px 22px;
    }
    .change-item{
      padding:16px 0;
      border-bottom:1px solid var(--line);
    }
    .change-item:last-child{border-bottom:0}
    .change-version{
      display:inline-block;
      font-family:"Plus Jakarta Sans",sans-serif;
      font-weight:700;
      font-size:14px;
      margin-right:8px;
    }
    .change-date{
      display:inline-block;
      font-size:10px;
      font-weight:700;
      color:#fff;
      background:var(--blue);
      border-radius:999px;
      padding:3px 7px;
      vertical-align:2px;
    }
    .change-item ul{
      margin:8px 0 0 18px;
      padding:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.55;
    }

    .filmstrip{
      grid-column:1 / -1;
      min-height:0;
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.92);
      display:flex;
      flex-direction:column;
      min-width:0;
      overflow:hidden;
      position:relative;
    }
    .filmstrip::before,.filmstrip::after{display:none}
    .filmstrip-head{
      height:28px;
      padding:0 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom:1px solid var(--line);
      font-size:10.5px;
      color:var(--muted);
    }
    .filmstrip-head strong{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:var(--text)}
    .filmstrip-scroll{
      flex:1;
      min-height:0;
      display:flex;
      gap:7px;
      padding:7px 12px 8px;
      overflow-x:auto;
      overflow-y:hidden;
      align-items:center;
    }
    .thumb{
      width:68px;
      min-width:68px;
      height:58px;
      border-radius:8px;
      border:2px solid transparent;
      overflow:hidden;
      position:relative;
      background:#e9eef4;
      cursor:pointer;
      transition:.16s ease;
    }
    .thumb:hover{transform:translateY(-1px)}
    .thumb.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(154,91,18,.35)}
    .thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .thumb .badge{
      position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;border-radius:3px;
      padding:2px 5px;font-size:9px;font-weight:700;
    }
    .thumb .done{
      position:absolute;right:6px;bottom:6px;background:var(--good);color:#fff;border-radius:50%;
      width:17px;height:17px;display:none;place-items:center;font-size:9px;font-weight:700;
    }
    .thumb.edited .done{display:grid}

    .quality-pill{
      display:inline-flex;align-items:center;gap:6px;border-radius:3px;padding:5px 8px;font-size:11px;font-weight:700;
      background:var(--panel-2);color:var(--muted);
    }
    .quality-pill.good{background:#e7f0e9;color:var(--good)}
    .quality-pill.warn{background:#f7ecd8;color:var(--warn)}
    .format-toggle{
      display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:4px;border-radius:5px;background:var(--panel-2);
      border:1px solid var(--line);
    }
    .format-option{
      border:0;border-radius:3px;padding:9px 10px;background:transparent;color:var(--muted);
      font-size:12px;font-weight:700;cursor:pointer;
    }
    .format-option.active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(33,28,20,.1)}

    .footer-note{color:var(--muted);font-size:11px;line-height:1.45;margin-top:10px}

    @media (max-width:1120px){
      main{grid-template-columns:270px 1fr;grid-template-rows:minmax(0,1fr) 150px}
      .right{display:none}
    }
    @media (max-width:760px){
      .brandtext small{display:none}
      header{padding:8px 12px}
      .header-actions{gap:6px}
      .header-switch{display:none}
      .header-actions .btn{padding:9px 10px;font-size:11px}
      main{
        grid-template-columns:220px minmax(0,1fr);
        grid-template-rows:minmax(0,1fr) 96px;
      }
      .right{display:none}
      .left{border-right:1px solid var(--line);border-bottom:0;padding:14px}
      .workspace{padding:12px}
      .filmstrip{height:auto}
    }
  
    /* RondApp v1.4.1 — visual polish */
    .section-title{color:var(--blue-2);opacity:.72}
    .preset.active{
      border-color:var(--blue);
      box-shadow:0 0 0 3px rgba(37,99,235,.10);
      background:#f7faff;
    }
    .preset.active strong{color:var(--blue-2)}
    .preset.active em{color:var(--blue)}
    .mini-btn:hover,.micro-btn:hover{background:#f3f7ff;border-color:#bfd0f4}
    .info-card{box-shadow:var(--shadow-soft)}
    .upload:hover{border-color:#9bb8ef;background:#fbfdff}
    .switch input:checked + .slider{background:var(--blue)}
    .format-option.active{color:var(--blue-2);box-shadow:0 3px 10px rgba(15,45,107,.08)}
    .quality-pill.good{background:#e9f8f1;color:var(--good)}
    .quality-pill.warn{background:#fff4e5;color:var(--warn)}
    .modal-card{border:1px solid rgba(220,228,239,.9)}
    .modal-kicker{color:var(--blue)}
    .change-version{color:var(--blue-2)}
    .thumb.active{border-color:#7da7ff;box-shadow:0 0 0 3px rgba(37,99,235,.16)}
  
    /* RondApp v1.5.0 — consistency and header cleanup */
    :root{
      --type-action:12px;
      --type-label:11px;
      --type-body:12px;
    }
    .brand-version{white-space: nowrap;  font-size:12px;}

    .btn,.mini-btn,.upload strong,.format-option{
      font-size:var(--type-action)!important;
      font-weight:700;
      line-height:1.2;
    }
    .micro-btn{font-size:10px;font-weight:700}
    .section-title,.field label,.control label{font-size:var(--type-label)}
    .upload span,.preset span,.preset em,.stat,.value,.footer-note{font-size:var(--type-body)}
    .preset strong{font-size:var(--type-action);font-weight:700}

    .changelog-link{
      border:0;
      background:transparent;
      padding:8px 4px;
      color:var(--muted);
      font-size:var(--type-action);
      font-weight:700;
      cursor:pointer;
    }
    .changelog-link:hover{color:var(--blue)}
    .nav-arrow{
      width:38px;
      min-width:38px;
      padding:10px 0;
      font-size:16px!important;
      line-height:1;
    }
    #currentName{
      max-width:100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

  
    /* v1.5.1 — normalización de campos */
    .field input,
    .field select,
    #customW,
    #customH,
    #baseName{
      font-family:"Plus Jakarta Sans",system-ui,sans-serif;
      font-size:12px;
      font-weight:500;
      line-height:1.2;
      letter-spacing:0;
    }

    .field input::placeholder,
    #baseName::placeholder{
      font-family:"Plus Jakarta Sans",system-ui,sans-serif;
      font-size:12px;
      font-weight:500;
      color:var(--muted);
      opacity:1;
    }

    input[type="number"]{
      -moz-appearance:textfield;
      appearance:textfield;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button{
      -webkit-appearance:none;
      margin:0;
    }

    .app-credit{
      flex:0 0 auto;
      padding:7px 4px 0;
      font-size:10px;
      line-height:1.2;
      color:var(--muted);
      text-align:left;
      opacity:.72;
      white-space:nowrap;
    }

    .app-credits {
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:100%;
    }

    .app-credit-right {
      margin-left:auto;
      text-align:right;
      text-decoration:none;
      color:inherit;
    }

    .app-credit-right:hover {
      text-decoration:underline;
    }

    .modal-close{
      width:36px;
      height:36px;
      flex:0 0 36px;
      border:1px solid var(--line);
      border-radius:11px;
      background:#fff;
      color:var(--text);
      cursor:pointer;
      display:grid;
      place-items:center;
      padding:0;
      font-family:"Plus Jakarta Sans",system-ui,sans-serif;
      font-size:20px;
      font-weight:500;
      line-height:1;
    }
    .modal-close:hover{
      background:#f6f9fc;
      border-color:#cbd8e4;
    }