/* ============================================================
   Image Optimizer SEO – Hoja de estilos
   Diseño: moderno, profesional, responsive
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
.ios-wrap {
    --ios-bg:        #0f1117;
    --ios-surface:   #181d28;
    --ios-surface2:  #1e2535;
    --ios-border:    #2a3147;
    --ios-accent:    #4f8ef7;
    --ios-accent2:   #7c3aed;
    --ios-green:     #22c55e;
    --ios-yellow:    #f59e0b;
    --ios-red:       #ef4444;
    --ios-text:      #e8eaf0;
    --ios-muted:     #7a8499;
    --ios-radius:    14px;
    --ios-radius-sm: 8px;
    --ios-shadow:    0 4px 24px rgba(0,0,0,.45);
    --ios-font:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --ios-mono:      'Fira Code', 'Consolas', monospace;
    --ios-max-w:     860px;

    font-family:    var(--ios-font);
    color:          var(--ios-text);
    background:     var(--ios-bg);
    max-width:      var(--ios-max-w);
    margin:         0 auto;
    padding:        24px 16px 40px;
    box-sizing:     border-box;
}

.ios-wrap *, .ios-wrap *::before, .ios-wrap *::after {
    box-sizing: inherit;
}

/* ── Card ──────────────────────────────────────────────────── */
.ios-card {
    background:    var(--ios-surface);
    border:        1px solid var(--ios-border);
    border-radius: var(--ios-radius);
    padding:       28px;
    margin-bottom: 20px;
    box-shadow:    var(--ios-shadow);
}

/* ── Titulos de sección ────────────────────────────────────── */
.ios-section-title {
    font-size:     1rem;
    font-weight:   600;
    color:         var(--ios-text);
    margin:        0 0 22px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    letter-spacing:.3px;
}

.ios-icon-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ios-accent);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(79,142,247,.6);
}

.ios-icon-dot.ios-dot-green {
    background: var(--ios-green);
    box-shadow: 0 0 8px rgba(34,197,94,.5);
}

.ios-badge-optional {
    font-size:     .72rem;
    font-weight:   400;
    color:         var(--ios-muted);
    background:    var(--ios-surface2);
    border:        1px solid var(--ios-border);
    border-radius: 20px;
    padding:       2px 10px;
    margin-left:   auto;
}

.ios-subsection-title {
    font-size:    .88rem;
    font-weight:  600;
    color:        var(--ios-muted);
    margin:       0 0 16px;
    display:      flex;
    align-items:  center;
    gap:          7px;
    text-transform: uppercase;
    letter-spacing: .7px;
}

/* ── Drop Zone ─────────────────────────────────────────────── */
.ios-drop-zone {
    border:        2px dashed var(--ios-border);
    text-align:    center;
    cursor:        pointer;
    transition:    border-color .2s, background .2s;
    position:      relative;
    padding:       40px 28px;
}

.ios-drop-zone:hover,
.ios-drop-zone.ios-drag-over {
    border-color: var(--ios-accent);
    background:   rgba(79,142,247,.05);
}

.ios-drop-inner {
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           10px;
}

.ios-drop-icon {
    width:    64px;
    height:   64px;
    color:    var(--ios-accent);
    opacity:  .8;
    margin-bottom: 4px;
}

.ios-drop-title {
    font-size:   1.15rem;
    font-weight: 600;
    margin:      0;
}

.ios-drop-sub  { color: var(--ios-muted); margin: 0; font-size: .9rem; }
.ios-drop-hint { color: var(--ios-muted); margin: 0; font-size: .78rem; }

.ios-file-hidden {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; overflow: hidden;
}

/* ── Preview ───────────────────────────────────────────────── */
.ios-preview-wrap {
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           12px;
}

.ios-preview-img {
    max-width:     100%;
    max-height:    240px;
    border-radius: var(--ios-radius-sm);
    object-fit:    contain;
    border:        1px solid var(--ios-border);
    background:    var(--ios-surface2);
}

.ios-preview-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.ios-tag {
    font-size:     .78rem;
    background:    var(--ios-surface2);
    border:        1px solid var(--ios-border);
    border-radius: 6px;
    padding:       3px 10px;
    color:         var(--ios-text);
}

.ios-tag.ios-tag-muted { color: var(--ios-muted); }

.ios-btn-reset {
    background:  transparent;
    border:      1px solid var(--ios-border);
    color:       var(--ios-muted);
    border-radius: var(--ios-radius-sm);
    padding:     6px 16px;
    font-size:   .8rem;
    cursor:      pointer;
    transition:  color .15s, border-color .15s;
}
.ios-btn-reset:hover { color: var(--ios-text); border-color: var(--ios-muted); }

/* ── Grillas ───────────────────────────────────────────────── */
.ios-grid-2 {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   20px;
}

.ios-grid-3 {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
}

.ios-field-full { grid-column: 1 / -1; }

/* ── Campos de formulario ─────────────────────────────────── */
.ios-field { display: flex; flex-direction: column; gap: 6px; }

.ios-label {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--ios-text);
    letter-spacing: .2px;
}

.ios-input {
    background:    var(--ios-surface2);
    border:        1px solid var(--ios-border);
    border-radius: var(--ios-radius-sm);
    color:         var(--ios-text);
    font-family:   var(--ios-font);
    font-size:     .9rem;
    padding:       10px 14px;
    outline:       none;
    transition:    border-color .15s, box-shadow .15s;
    width:         100%;
}

.ios-input::placeholder { color: #4a5468; }

.ios-input:focus {
    border-color: var(--ios-accent);
    box-shadow:   0 0 0 3px rgba(79,142,247,.15);
}

.ios-textarea { resize: vertical; min-height: 68px; }

.ios-field-hint {
    font-size:  .74rem;
    color:      var(--ios-muted);
    margin:     0;
    line-height: 1.4;
}

/* ── Formato de botones ────────────────────────────────────── */
.ios-format-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
}

.ios-format-btn {
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           5px;
    background:    var(--ios-surface2);
    border:        2px solid var(--ios-border);
    border-radius: var(--ios-radius-sm);
    padding:       12px 8px;
    cursor:        pointer;
    transition:    border-color .15s, background .15s;
    text-align:    center;
}

.ios-format-btn:hover { border-color: var(--ios-accent); }

.ios-format-btn.active {
    border-color: var(--ios-accent);
    background:   rgba(79,142,247,.12);
}

.ios-format-btn.ios-disabled {
    opacity: .45;
    cursor:  not-allowed;
}

.ios-format-name {
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--ios-text);
}

.ios-format-badge {
    font-size:     .65rem;
    background:    rgba(79,142,247,.2);
    color:         var(--ios-accent);
    border-radius: 4px;
    padding:       2px 6px;
    font-weight:   600;
    white-space:   nowrap;
}

.ios-badge-premium { background: rgba(124,58,237,.2); color: #a78bfa; }
.ios-badge-neutral { background: var(--ios-surface); color: var(--ios-muted); }

/* ── Slider ────────────────────────────────────────────────── */
.ios-slider-wrap { display: flex; flex-direction: column; gap: 8px; }

.ios-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--ios-accent) var(--slider-pct, 82%), var(--ios-surface2) var(--slider-pct, 82%));
    outline: none;
    cursor: pointer;
}

.ios-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         20px; height: 20px;
    border-radius: 50%;
    background:    var(--ios-accent);
    border:        3px solid var(--ios-bg);
    box-shadow:    0 0 0 1px var(--ios-accent);
    cursor:        pointer;
}

.ios-slider-ticks {
    display:         flex;
    justify-content: space-between;
    font-size:       .7rem;
    color:           var(--ios-muted);
}

/* ── Bloque ubicación ──────────────────────────────────────── */
.ios-location-block {
    margin-top:    24px;
    padding-top:   20px;
    border-top:    1px solid var(--ios-border);
}

/* ── Botones ───────────────────────────────────────────────── */
.ios-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    border:          none;
    border-radius:   var(--ios-radius-sm);
    padding:         11px 22px;
    font-family:     var(--ios-font);
    font-size:       .9rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .15s, opacity .15s, transform .1s;
}

.ios-btn:active { transform: scale(.98); }

.ios-btn-primary {
    background: var(--ios-accent);
    color:      #fff;
}

.ios-btn-primary:hover { background: #3b7de8; }

.ios-btn-cta {
    background:    linear-gradient(135deg, var(--ios-accent), var(--ios-accent2));
    color:         #fff;
    font-size:     1rem;
    padding:       14px 32px;
    border-radius: var(--ios-radius);
    box-shadow:    0 4px 20px rgba(79,142,247,.35);
}

.ios-btn-cta:hover:not(:disabled) {
    box-shadow: 0 6px 28px rgba(79,142,247,.5);
    filter:     brightness(1.08);
}

.ios-btn-cta:disabled {
    opacity:  .4;
    cursor:   not-allowed;
    transform: none;
    box-shadow: none;
}

.ios-btn-icon { width: 20px; height: 20px; }

.ios-btn-download {
    background: var(--ios-green);
    color:      #fff;
    width:      100%;
    justify-content: center;
    font-size:  1rem;
    padding:    14px;
    border-radius: var(--ios-radius-sm);
    box-shadow: 0 4px 16px rgba(34,197,94,.3);
}

.ios-btn-download svg { width: 20px; height: 20px; }
.ios-btn-download:hover { background: #16a34a; }

.ios-btn-secondary {
    background: var(--ios-surface2);
    border:     1px solid var(--ios-border);
    color:      var(--ios-text);
    width:      100%;
    justify-content: center;
    margin-top: 10px;
}

.ios-btn-secondary:hover { border-color: var(--ios-accent); color: var(--ios-accent); }

/* ── Action row ────────────────────────────────────────────── */
.ios-action-row {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    margin-bottom:  20px;
}

.ios-action-hint {
    font-size: .8rem;
    color:     var(--ios-muted);
    margin:    0;
}

/* ── Options card ──────────────────────────────────────────── */
.ios-options-card { margin-bottom: 20px; }

/* ── Loader ────────────────────────────────────────────────── */
.ios-loader {
    background:    var(--ios-surface);
    border:        1px solid var(--ios-border);
    border-radius: var(--ios-radius);
    padding:       48px 24px;
    text-align:    center;
    margin-bottom: 20px;
    box-shadow:    var(--ios-shadow);
}

.ios-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.ios-spinner {
    display:  inline-block;
    position: relative;
    width:    48px; height: 48px;
}

.ios-spinner div {
    position:   absolute;
    border:     4px solid transparent;
    border-top-color: var(--ios-accent);
    border-radius: 50%;
    animation: ios-spin 1s linear infinite;
}

.ios-spinner div:nth-child(1) { inset: 0; }
.ios-spinner div:nth-child(2) { inset: 8px; animation-delay: -.3s; border-top-color: var(--ios-accent2); }
.ios-spinner div:nth-child(3) { inset: 16px; animation-delay: -.15s; }
.ios-spinner div:nth-child(4) { display:none; }

@keyframes ios-spin { to { transform: rotate(360deg); } }

.ios-loader-text { font-size: 1.05rem; font-weight: 600; margin: 0; }
.ios-loader-sub  { font-size: .82rem; color: var(--ios-muted); margin: 0; }

/* ── Resultado ─────────────────────────────────────────────── */
.ios-result-card {
    border-color: rgba(34,197,94,.3);
    background:   linear-gradient(135deg, var(--ios-surface), rgba(34,197,94,.04));
}

.ios-result-header {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-bottom: 24px;
}

.ios-result-icon {
    width:          48px; height: 48px;
    background:     var(--ios-green);
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      1.4rem;
    font-weight:    700;
    color:          #fff;
    flex-shrink:    0;
    box-shadow:     0 0 16px rgba(34,197,94,.4);
}

.ios-result-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.ios-result-sub   { color: var(--ios-muted); font-size: .85rem; margin: 0; }

.ios-stats-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
    margin-bottom:         24px;
}

.ios-stat {
    background:    var(--ios-surface2);
    border:        1px solid var(--ios-border);
    border-radius: var(--ios-radius-sm);
    padding:       14px 16px;
    display:       flex;
    flex-direction:column;
    gap:           6px;
}

.ios-stat-label { font-size: .72rem; color: var(--ios-muted); text-transform: uppercase; letter-spacing: .5px; }
.ios-stat-value { font-size: 1.1rem; font-weight: 700; }

.ios-stat-highlight {
    border-color: rgba(34,197,94,.35);
    background:   rgba(34,197,94,.06);
}

.ios-stat-highlight .ios-stat-value { color: var(--ios-green); }

/* ── Snippet ───────────────────────────────────────────────── */
.ios-snippet-block {
    margin-top:    20px;
    border-top:    1px solid var(--ios-border);
    padding-top:   18px;
}

.ios-snippet-label {
    font-size:   .78rem;
    color:       var(--ios-muted);
    margin:      0 0 8px;
    display:     flex;
    align-items: center;
    gap:         6px;
}

.ios-snippet-code-wrap {
    position:   relative;
    background: #0a0d14;
    border:     1px solid var(--ios-border);
    border-radius: var(--ios-radius-sm);
    overflow:   hidden;
}

.ios-snippet-code {
    font-family: var(--ios-mono);
    font-size:   .78rem;
    color:       #a9c7ff;
    margin:      0;
    padding:     16px 70px 16px 16px;
    white-space: pre-wrap;
    word-break:  break-all;
    line-height: 1.6;
}

.ios-snippet-copy {
    position:    absolute;
    top:         8px; right: 8px;
    background:  var(--ios-surface2);
    border:      1px solid var(--ios-border);
    border-radius: 6px;
    color:       var(--ios-text);
    font-size:   .72rem;
    padding:     5px 10px;
    cursor:      pointer;
    transition:  background .15s;
}

.ios-snippet-copy:hover { background: var(--ios-accent); border-color: var(--ios-accent); }
.ios-snippet-copy.copied { background: var(--ios-green); border-color: var(--ios-green); }

/* ── Error ─────────────────────────────────────────────────── */
.ios-error-msg {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    background:    rgba(239,68,68,.1);
    border:        1px solid rgba(239,68,68,.3);
    border-radius: var(--ios-radius-sm);
    padding:       14px 18px;
    color:         #f87171;
    font-size:     .9rem;
    margin-bottom: 16px;
}

.ios-error-msg svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

/* ── Server note ───────────────────────────────────────────── */
#ios-server-note { color: var(--ios-yellow); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 680px) {
    .ios-card            { padding: 18px 14px; }
    .ios-grid-2          { grid-template-columns: 1fr; }
    .ios-grid-3          { grid-template-columns: 1fr 1fr; }
    .ios-format-grid     { grid-template-columns: repeat(2, 1fr); }
    .ios-stats-grid      { grid-template-columns: 1fr 1fr; }
    .ios-stat-highlight  { grid-column: 1 / -1; }
    .ios-section-title   { flex-wrap: wrap; }
    .ios-badge-optional  { margin-left: 0; }
}

@media (max-width: 400px) {
    .ios-grid-3      { grid-template-columns: 1fr; }
    .ios-format-grid { grid-template-columns: 1fr 1fr; }
    .ios-stats-grid  { grid-template-columns: 1fr; }
}