frontend/css/style.css

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --accent:#0b3954; /* azul marino */
  --muted:#6b7280;
  --success:#0f9d58;
  --warning:#f59e0b;
  --danger:#dc2626;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial;line-height:1.5;background:var(--bg);color:#0f172a;margin:0}
.container{max-width:900px;margin:32px auto;padding:24px}
.hero{text-align:left;margin-bottom:18px}
.hero h1{font-size:1.6rem;color:var(--accent);margin:0 0 6px}
.lead{color:var(--muted);margin:0}
.panel{background:var(--card);border-radius:10px;padding:20px;box-shadow:0 6px 18px rgba(11,57,84,0.06)}
.form label{display:block;font-weight:600;margin-bottom:8px}
textarea{width:100%;padding:14px;border:1px solid #e6eef7;border-radius:8px;resize:vertical;font-size:0.95rem}
.dropzone{margin-top:14px;padding:18px;border:2px dashed #dbeafe;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg, rgba(11,57,84,0.02), transparent);cursor:pointer;transition:all 0.2s ease}
.dropzone:hover{border-color:var(--accent);background:linear-gradient(180deg, rgba(11,57,84,0.05), transparent)}
.dropzone.drag{border-color:var(--accent);background:rgba(11,57,84,0.08)}
.dropzone p{margin:0;color:var(--muted)}
.dropzone input{opacity:0;position:absolute;pointer-events:none}
.file-status{margin-top:14px;padding:14px;border:1px solid #e0e7ff;border-radius:8px;background:linear-gradient(180deg, rgba(15,157,88,0.04), transparent);display:flex;align-items:center;justify-content:space-between;gap:12px}
.file-info{display:flex;align-items:center;gap:10px;flex:1}
.file-icon{font-size:1.3rem}
.file-details{min-width:0}
.file-name{margin:0;font-weight:600;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{margin:0;font-size:0.85rem;color:var(--muted)}
.btn-clear{padding:4px 8px;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1.2rem;border-radius:4px;transition:all 0.2s}
.btn-clear:hover{background:rgba(220,38,38,0.1);color:var(--danger)}
.upload-progress{margin-top:14px;padding:8px;background:#fbfdff;border-radius:8px}
.progress-bar{width:100%;height:6px;background:#e6eef7;border-radius:4px;overflow:hidden;margin-bottom:4px}
.progress-fill{height:100%;background:linear-gradient(90deg, var(--accent), #0d9488);width:0%;transition:width 0.3s ease;border-radius:4px}
.progress-text{font-size:0.8rem;color:var(--muted);display:block;text-align:right}
.actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.btn{padding:10px 16px;border-radius:8px;border:none;cursor:pointer;transition:all .18s ease;font-weight:600}
.btn.primary{background:var(--accent);color:white;box-shadow:0 6px 14px rgba(11,57,84,0.12)}
.btn.primary:hover{transform:translateY(-2px)}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted)}
.loading .spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(11,57,84,0.12);border-top-color:var(--accent);animation:spin 1s linear infinite}
.hidden{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.resultado{margin-top:20px}
.nivel{font-weight:800;padding:10px;border-radius:8px;color:white;display:inline-block;margin-bottom:12px}
.nivel.bajo{background:var(--success)}
.nivel.medio{background:var(--warning);color:#111}
.nivel.alto{background:var(--danger)}
.card{background:#fbfdff;border:1px solid #eef6ff;padding:14px;border-radius:8px;margin-top:12px}
.card h3{margin:0 0 8px}
ul{margin:0 0 0 18px}
.footer{margin-top:18px;color:var(--muted);text-align:center}