/* ==========================================================
   EduTec Manager — Historial de Pagos (Financieros)
   Archivo: assets/css/c-fin-historial.css
   Autocontenido: duplica botón outline / sug-item / tarjeta por si
   esta página no carga junto con c-fin-terminal.css
   ========================================================== */

/* ----------------------------------------------------------
   Botón outline con color primario del plantel
---------------------------------------------------------- */
.etm-fin-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--etm-radius, 8px) !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease !important;
    white-space: nowrap !important;
}

.etm-fin-btn-outline-primary {
    border: 1.5px solid var(--etm-p-primario) !important;
    color: var(--etm-p-primario) !important;
}

.etm-fin-btn-outline-primary:hover:not(:disabled) {
    background: var(--etm-p-primario) !important;
    color: #ffffff !important;
}

.etm-fin-btn-sm {
    padding: 5px 12px !important;
    font-size: 12px !important;
}

/* ----------------------------------------------------------
   Selector / buscador (idéntico al de la Terminal)
---------------------------------------------------------- */
.etm-ft-selector {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
}

.etm-ft-selector-label { font-weight: 600 !important; color: var(--etm-gray-700, #334155) !important; }

.etm-ft-radio-group { display: flex !important; gap: 16px !important; flex-wrap: wrap !important; }

.etm-ft-radio-option {
    display: flex !important; align-items: center !important; gap: 6px !important;
    cursor: pointer !important; font-size: 14px !important;
}

.etm-ft-radio-option input[type="radio"] { accent-color: var(--etm-p-primario) !important; }

.etm-ft-buscador {
    display: flex !important; align-items: flex-end !important; gap: 10px !important;
    margin-bottom: 16px !important; flex-wrap: wrap !important;
}

.etm-ft-search-label { display: block !important; font-weight: 600 !important; margin-bottom: 6px !important; }

.etm-ft-search-container { position: relative !important; flex: 1 !important; min-width: 240px !important; }

.etm-ft-search-container input {
    width: 100% !important; padding: 10px 14px !important;
    border: 1px solid var(--etm-gray-300, #cbd5e1) !important;
    border-radius: var(--etm-radius, 8px) !important; font-size: 14px !important; box-sizing: border-box !important;
}

.etm-ft-resultados {
    display: none;
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    background: #fff !important; border: 1px solid var(--etm-gray-200, #e2e8f0) !important;
    border-radius: var(--etm-radius, 8px) !important;
    box-shadow: var(--etm-shadow-md, 0 4px 8px rgba(0,0,0,.08)) !important;
    max-height: 280px !important; overflow-y: auto !important; z-index: 50 !important;
}

.etm-ft-resultado-item { padding: 10px 14px !important; cursor: pointer !important; border-bottom: 1px solid var(--etm-gray-100, #f1f5f9) !important; font-size: 14px !important; }
.etm-ft-resultado-item:last-child { border-bottom: none !important; }
.etm-ft-resultado-item:hover { background: var(--etm-gray-50, #f8fafc) !important; }

.etm-sug-item-alumno { display: flex !important; align-items: center !important; gap: 10px !important; }
.etm-sug-foto { width: 36px !important; height: 44px !important; object-fit: cover !important; border-radius: 4px !important; border: 1px solid var(--etm-gray-200, #e2e8f0) !important; flex-shrink: 0 !important; background: var(--etm-gray-100, #f1f5f9) !important; }
.etm-sug-info { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.etm-sug-nombre { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.etm-sug-meta { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; }

/* ----------------------------------------------------------
   Tarjeta de estudiante (idéntica a la Terminal)
---------------------------------------------------------- */
.etm-ft-tarjeta {
    background: #fff !important; border: 1px solid var(--etm-gray-200, #e2e8f0) !important;
    border-radius: var(--etm-radius-lg, 12px) !important; margin-bottom: 20px !important;
    overflow: hidden !important; box-shadow: var(--etm-shadow, 0 1px 3px rgba(0,0,0,.08)) !important;
}

.etm-ft-tarjeta-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    padding: 14px 20px !important; background: var(--etm-p-primario) !important;
}

.etm-ft-tarjeta-header h3 { margin: 0 !important; font-size: 16px !important; color: #fff !important; }

.etm-ft-badge-header {
    display: inline-block !important; background: rgba(255,255,255,.9) !important; color: var(--etm-p-primario) !important;
    font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: .4px !important; padding: 4px 12px !important; border-radius: 20px !important;
}

.etm-ft-tarjeta-body { display: flex !important; gap: 16px !important; align-items: center !important; padding: 16px 20px !important; flex-wrap: wrap !important; }
.etm-ft-foto img { width: 72px !important; height: 72px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid var(--etm-gray-200, #e2e8f0) !important; }
.etm-ft-nombre { font-size: 16px !important; font-weight: 700 !important; }

/* ----------------------------------------------------------
   Historial / acordeón
---------------------------------------------------------- */
.etm-fh-historial-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 14px !important; margin-bottom: 18px !important;
}

.etm-fh-historial-header h3 { margin: 0 !important; }

.etm-fh-stats { display: flex !important; gap: 20px !important; }

.etm-fh-stat { text-align: center !important; }
.etm-fh-stat span { display: block !important; font-size: 20px !important; font-weight: 700 !important; color: var(--etm-p-primario) !important; }
.etm-fh-stat small { color: var(--etm-gray-500, #64748b) !important; font-size: 11px !important; text-transform: uppercase !important; }

.etm-fh-periodo {
    border: 1px solid var(--etm-gray-200, #e2e8f0) !important;
    border-radius: var(--etm-radius, 8px) !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

.etm-fh-periodo-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    padding: 12px 16px !important; background: var(--etm-gray-50, #f8fafc) !important;
    cursor: pointer !important; font-weight: 600 !important; font-size: 14px !important;
}

.etm-fh-periodo-stats { font-weight: 400 !important; font-size: 13px !important; color: var(--etm-gray-600, #475569) !important; display: flex !important; align-items: center !important; gap: 8px !important; }

.etm-fh-periodo-body { padding: 12px 16px !important; }

.etm-fh-recibo {
    padding: 12px !important;
    border: 1px solid var(--etm-gray-100, #f1f5f9) !important;
    border-radius: var(--etm-radius, 8px) !important;
    margin-bottom: 10px !important;
}

.etm-fh-recibo:last-child { margin-bottom: 0 !important; }

.etm-fh-recibo-cancelado {
    background: #fef2f2 !important;
    opacity: .8 !important;
}

.etm-fh-recibo-resumen {
    display: flex !important; justify-content: space-between !important; align-items: flex-start !important;
    gap: 10px !important; flex-wrap: wrap !important;
}

.etm-fh-recibo-derecha { display: flex !important; align-items: center !important; gap: 10px !important; }

.etm-fh-recibo-conceptos { margin: 8px 0 0 0 !important; padding-left: 18px !important; font-size: 13px !important; color: var(--etm-gray-600, #475569) !important; }

.etm-fh-recibo-obs { margin: 8px 0 0 0 !important; font-size: 12px !important; color: var(--etm-gray-500, #64748b) !important; }