/* Anagrafica Extractor — frontend styles (coerenti con Tango Manager) */
.aex-wrap {
    --aex-navy:   #1e293b;
    --aex-navy-lt:#334155;
    --aex-green:  #16a34a;
    --aex-green-d:#15803d;
    --aex-bg:     #f8fafc;
    --aex-border: #e2e8f0;
    --aex-muted:  #64748b;
    --aex-text:   #1e293b;
    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--aex-text);
}
.aex-wrap *, .aex-wrap *::before, .aex-wrap *::after { box-sizing: border-box; }

.aex-card {
    background: #fff;
    border: 1px solid var(--aex-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.aex-header {
    background: linear-gradient(135deg, var(--aex-navy) 0%, var(--aex-navy-lt) 100%);
    color: #fff;
    padding: 22px 24px;
}
.aex-title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.2; }
.aex-subtitle { margin: 0; font-size: .9rem; color: rgba(255,255,255,.82); line-height: 1.45; }

/* Tabs */
.aex-tabs { display: flex; gap: 4px; padding: 14px 16px 0; border-bottom: 1px solid var(--aex-border); }
.aex-tab {
    flex: 1; background: transparent; border: none; border-bottom: 3px solid transparent;
    padding: 10px 12px; font-size: .92rem; font-weight: 600; color: var(--aex-muted);
    cursor: pointer; border-radius: 8px 8px 0 0; transition: all .15s ease;
}
.aex-tab:hover { background: var(--aex-bg); color: var(--aex-navy); }
.aex-tab-active { color: var(--aex-navy); border-bottom-color: var(--aex-green); background: var(--aex-bg); }

/* Panels */
.aex-panel { display: none; padding: 20px 24px; }
.aex-panel-active { display: block; }

.aex-label {
    display: block; font-size: .82rem; font-weight: 700; color: var(--aex-navy);
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px;
}

.aex-textarea {
    width: 100%; border: 1.5px solid var(--aex-border); border-radius: 10px;
    padding: 12px 14px; font-size: .92rem; font-family: inherit; color: var(--aex-text);
    resize: vertical; transition: border-color .15s ease;
}
.aex-textarea:focus { outline: none; border-color: var(--aex-green); box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

/* Dropzone */
.aex-dropzone {
    position: relative; border: 2px dashed var(--aex-border); border-radius: 12px;
    padding: 28px 20px; text-align: center; cursor: pointer; transition: all .15s ease; background: var(--aex-bg);
}
.aex-dropzone:hover, .aex-dropzone.aex-dragover { border-color: var(--aex-green); background: rgba(22,163,74,.04); }
.aex-dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aex-dropzone-icon { font-size: 2rem; }
.aex-dropzone-text { font-weight: 600; color: var(--aex-navy); }
.aex-dropzone-hint { font-size: .8rem; color: var(--aex-muted); }
.aex-preview { display: none; max-width: 100%; max-height: 260px; margin-top: 14px; border-radius: 8px; border: 1px solid var(--aex-border); }
.aex-preview.aex-has-img { display: inline-block; }

/* Progress */
.aex-progress { margin-top: 14px; height: 8px; background: var(--aex-border); border-radius: 999px; overflow: hidden; }
.aex-progress-bar { height: 100%; width: 0; background: var(--aex-green); border-radius: 999px; transition: width .2s ease; }

/* Buttons */
.aex-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 16px; padding: 11px 22px; border: none; border-radius: 10px;
    font-size: .92rem; font-weight: 700; cursor: pointer; transition: all .15s ease;
}
.aex-btn:disabled { opacity: .5; cursor: not-allowed; }
.aex-btn-primary { background: var(--aex-green); color: #fff; width: 100%; }
.aex-btn-primary:hover:not(:disabled) { background: var(--aex-green-d); }
.aex-btn-copy { background: var(--aex-navy); color: #fff; margin-top: 12px; }
.aex-btn-copy:hover { background: var(--aex-navy-lt); }
.aex-btn-copy.aex-copied { background: var(--aex-green); }

/* Result */
.aex-result { padding: 4px 24px 24px; }
.aex-result-box {
    background: var(--aex-bg); border: 1.5px solid var(--aex-border); border-left: 4px solid var(--aex-green);
    border-radius: 10px; padding: 14px 16px; font-size: .95rem; line-height: 1.5; word-break: break-word; color: var(--aex-text);
}
.aex-result-text { user-select: all; }

.aex-raw { margin-top: 12px; }
.aex-raw summary { cursor: pointer; font-size: .82rem; color: var(--aex-muted); font-weight: 600; }
.aex-raw-text {
    margin-top: 8px; background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px;
    font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto;
}

/* Status */
.aex-status { margin: 0 24px 20px; padding: 12px 14px; border-radius: 10px; font-size: .88rem; font-weight: 600; }
.aex-status-loading { background: #eff6ff; color: #1d4ed8; }
.aex-status-error   { background: #fef2f2; color: #b91c1c; }

.aex-spinner {
    display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(29,78,216,.25);
    border-top-color: #1d4ed8; border-radius: 50%; margin-right: 8px; vertical-align: -2px; animation: aex-spin .7s linear infinite;
}
@keyframes aex-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .aex-header { padding: 18px 18px; }
    .aex-title { font-size: 1.15rem; }
    .aex-panel { padding: 16px 18px; }
    .aex-result { padding: 4px 18px 18px; }
    .aex-status { margin: 0 18px 16px; }
    .aex-tab { font-size: .82rem; padding: 9px 6px; }
}