body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#f0f2f5; padding:20px; color:#333; }

.container{ max-width:1100px; margin:auto; background:white; padding:30px; border-radius:12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

h2 { text-align: center; color: #2c3e50; margin-bottom: 5px; }
.subtitle { text-align: center; color: #7f8c8d; font-size: 0.9em; margin-bottom: 25px; }

/* Tabs / Secciones de entrada */
.input-section {
    background: #f8fafc; border: 2px dashed #cbd5e0; border-radius: 12px; padding: 25px;
    text-align: center; transition: 0.3s; margin-bottom: 20px;
}
.input-section:hover { border-color:#3498db; background:#ebf8ff; }

.drop-zone { cursor: pointer; }
.drop-zone div { font-size: 3em; margin-bottom: 10px; }

.url-input-box {
    display: flex; gap: 10px; max-width: 600px; margin: 10px auto;
}
.url-input-box input {
    flex: 1; padding: 12px; border: 1px solid #cbd5e0; border-radius: 6px; outline: none; font-size: 1em;
}

.separator {
    display: flex; align-items: center; text-align: center; color: #aaa; margin: 20px 0; font-weight: bold; font-size: 0.9em;
}
.separator::before, .separator::after {
    content: ''; flex: 1; border-bottom: 1px solid #e1e4e8;
}
.separator:not(:empty)::before { margin-right: .5em; }
.separator:not(:empty)::after { margin-left: .5em; }

/* Controles */
.controls-panel {
    background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.control-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.control-group { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 5px; }
.control-group label { font-weight: 600; font-size: 0.9em; color: #4a5568; }

/* Grid de resultados */
.preview-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:20px; margin-top: 20px;
}
.card{
    border:1px solid #e2e8f0; padding:10px; border-radius:10px; background:white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: transform 0.2s;
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.card img{ width:100%; height: 180px; object-fit: contain; background: #eee; border-radius:6px; border: 1px solid #edf2f7; margin: 5px 0; }
.card-info { font-size: 0.8em; color: #718096; margin-top: auto; line-height: 1.4; }
.badge { 
    display: inline-block; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 0.85em; margin-top: 5px;
}
.badge-green { background: #c6f6d5; color: #22543d; }
.badge-gray { background: #edf2f7; color: #4a5568; }

button{
    padding:10px 18px; border:none; background:#3182ce; color:white; border-radius:6px; cursor:pointer; font-weight: 600; transition: 0.2s;
}
button:hover { background: #2b6cb0; }
button.secondary { background: #718096; font-size: 0.85em; padding: 6px 12px; }
button.full-width { width: 100%; margin-top: 10px; }

input[type=range] { width: 100%; cursor: pointer; }

#loading { 
    text-align: center; display: none; margin: 20px; padding: 15px;
    background: #ebf8ff; color: #2b6cb0; border-radius: 8px; font-weight: bold; 
}

footer {
    text-align: center; margin-top: 40px; padding: 20px; color: #7f8c8d; font-size: 0.9em; border-top: 1px solid #e1e4e8;
}

button.secondary {
    background-color: #708090; /* Color pizarra/gris azulado de tu imagen */
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    width: 100%;
}

button.secondary:hover {
    background-color: #5a6976;
}