/* ================================
   IA — Extracción de biografía
   ================================ */

/* Advertencia "una sola vez" antes del botón de extracción */
.hi-form-ai-warning {
    background: #FDF5E6;
    border: 1px solid #D4A017;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #5C534A;
}

.hi-form-ai-warning strong {
    color: #9C2A1F;
}

/* Botón de extracción IA */
.hi-form-ai-extract-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    background: linear-gradient(135deg, #9C2A1F, #C44B3E);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.hi-form-ai-extract-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(156,42,31,0.3);
}

.hi-form-ai-extract-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Progreso durante la extracción */
.hi-form-ai-progress {
    text-align: center;
    padding: 2rem 1rem;
    font-size: 1.05rem;
    color: var(--hi-muted);
}

.hi-form-ai-progress .spinner-ai {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--hi-border);
    border-top-color: var(--hi-accent);
    border-radius: 50%;
    animation: hi-spin 0.8s linear infinite;
    margin-right: 0.75rem;
    vertical-align: middle;
}

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

/* Panel de resultados post-extracción */
.hi-form-ai-results {
    background: var(--hi-paper, #fafafa);
    border: 1px solid var(--hi-border, #e0e0e0);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.hi-form-ai-results h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    color: var(--hi-accent, #9C2A1F);
}

.hi-form-ai-results-summary {
    font-size: 0.9rem;
    color: var(--hi-muted);
    margin-bottom: 0.75rem;
}

/* Cada fila de sección en el panel de resultados */
.hi-form-ai-results-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hi-border-light, #f0f0f0);
    font-size: 0.85rem;
}

.hi-form-ai-results-section:last-child {
    border-bottom: none;
}

.hi-form-ai-results-section .section-label {
    flex: 1;
}

.hi-form-ai-results-section .section-status {
    font-weight: 500;
    white-space: nowrap;
}

.hi-form-ai-results-section .section-status.complete {
    color: #2A5A4C;
}

.hi-form-ai-results-section .section-status.partial {
    color: #D4A017;
}

.hi-form-ai-results-section .section-status.empty {
    color: #7A6F65;
}

/* Botones de acción en el panel de resultados */
.hi-form-ai-results-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.hi-form-ai-results-actions .hi-btn {
    font-size: 0.9rem;
}

/* Mensaje post-extracción (cuando ya se usó la IA) */
.hi-form-ai-used {
    background: #E8F0EC;
    border: 1px solid #A8C5B8;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: #2A5A4C;
}

/* Badge "Extraído por IA" en headings de paso (pasos 2-8) */
.hi-form-ai-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    background: #E8F0EC;
    color: #2A5A4C;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Badge de pendientes en la progress bar */
.hi-form-step .hi-form-step-num.hi-form-step-pending {
    background: #D4A017;
    color: var(--hi-ink);
    font-size: 0.6rem;
    font-weight: 600;
}

/* Campos que fueron extraídos por IA (borde sutil verde) */
.hi-form-field-ai-extracted input,
.hi-form-field-ai-extracted textarea,
.hi-form-field-ai-extracted select {
    border-left: 3px solid #A8C5B8;
    background-color: #F0F5F0;
    transition: border-color 0.2s;
}

.hi-form-field-ai-extracted input:focus,
.hi-form-field-ai-extracted textarea:focus,
.hi-form-field-ai-extracted select:focus {
    border-left-color: var(--hi-accent, #9C2A1F);
    background-color: var(--hi-surface);
}

/* Campos pendientes (sin datos extraídos) */
.hi-form-field-ai-pending input,
.hi-form-field-ai-pending textarea,
.hi-form-field-ai-pending select {
    border-left: 3px dashed #E8C87A;
}

/* Etiquetas de taxonomía no matcheadas */
.hi-form-tag-unmatched {
    opacity: 0.6;
    border-style: dashed !important;
}

.hi-form-tag-unmatched .hi-form-tag-label::after {
    content: " (nuevo)";
    font-size: 0.6rem;
    color: #D4A017;
    font-weight: 500;
}

/* Término sin match en el panel de clasificación */
.hi-form-ai-unmatched-list {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #D4A017;
}

.hi-form-ai-unmatched-list strong {
    display: block;
    margin-bottom: 0.25rem;
}

.hi-form-ai-unmatched-term {
    display: inline-block;
    background: #FDF5E6;
    border: 1px dashed #E8C87A;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin: 0.15rem;
}

/* ================================
   Tooltip de épocas
   ================================
   Muestra el año de nacimiento asociado a cada
   época al hacer hover sobre el nombre.
   ================================ */

.epoca-tooltip {
    cursor: help;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
    position: relative;
}

.epoca-tooltip:hover {
    border-bottom-color: rgba(0, 0, 0, 0.5);
}

/* Opcional: tooltip nativo más visible en navegadores que
   soportan la pseudo-clase ::title (progressive enhancement) */
@media (hover: hover) {
    .epoca-tooltip {
        border-bottom-style: dotted;
    }
}